I'm trying to wrap a TexField ui to a new custom component so that I can add extra functionalities and reuse the component within the project. I want it to still have the v-model binding so I implemented the following:
:text="text"
and
#textChange="(update)=>{$emit('textChange', update.value)}"
Wherein "text" is its prop named and exposed exactly as a normal TextField prop.
The pattern should work on web but I don't know if it's possible on nativescript vue component. Please have a look at the code I made in playground: https://play.nativescript.org/?template=play-vue&id=Ikap1R&v=1
It's not working. Please help if you know the solution.
Thanks
There is nothing you have to do specifically for {N}, if you know how it works with Vue.js, you got it.
All you have to do is, use a value prop for input value and emit input event on change.
Updated Playground
Related
Go here (Chrome seems to work best for this example):
https://jsfiddle.net/gongzza/m67d8f4x/2/
Type a#b.com into the input. Notice how the error goes away. Now clear the input.
In the console, programmatically set the value of the email with:
$('[name=email]').value = 'a#b.com'
Notice how the input changes but the validation does not get refreshed.
My recommendation is that you should use Vue to manipulate the values of these things. The only reason I can imagine you're trying to use jQuery here is because you're doing it from outside the Vue app. Given that, you would be better served to do this:
$('#app').__vue__.email = 'a#b.com'
That way Vue will notice the change and do it's own event handling. I'm not sure there's a more "official" way to access the Vue data, but this is the way I've done it before.
i have to fix a vuetify custom component that extends from Vue Class and includes a V-Select component. The dropdown is working fine but since its just a trigger pad to pop open modals the requirement is to reset/clear the dropdown selection after onchange event. basically i think i need to trigger the clearableCallback but i am not sure how to do it. First of all i have the problem that when i bind a method from the parent component the scope is always the parent so this refers to the extend parent component class. so i wonder how to get into the scope of the v-select component. i can not see apart from the clearable prop there is no native functionality for what i am trying to do. any hints? thanks
I am not sure I fully understand your question, but if I do, you may try using #change event on the v-select and use a method in which you open modals and reset the value of the v-select model to any desired one.
<v-select
v-model="select"
#change="someMethod"
>
</v-select>
...
methods: {
someMethod(){
this.openModal(this.select);
this.select = 0;
}
Setting the value to 0 only worked for the first change for me. Every subsequent change did not reset the displayed value. The only thing that worked consistently for me was using $nextTick. e.g.
onInput() {
this.$nextTick(() => {
this.select = 0;
});
}
It seems to be something to do with vuetify's internal implementation, and the lazyValue getting out of sync with the value prop.
As I far understand your question. The solution could be using the ref key in the v-select element and call the reset() function.
For example
In HTML
<v-select #change="handleOnSelectChange"
ref="selectedEl"/>
In vue methods
methods:{ handleOnSelectChange:function(){this.$refs["selectedEl"].reset();}}
As the title suggests, I've created a dynamic form using a mix of tutorials I've read.
I have a parent component which creates a empty form group which I then (try) to populate with sub-groups via child components. These components are passed a reference to the parent form, and the child component then creates its own formgroup and attempts to bind this to the parent.
The form model should then look like the following:
FormGroup
-- FormGroup1
---- FormControl1
---- FormControl2
-- FormGroup2
---- FormControl3
---- FormControl4
However, even thought the lower level form controls all render, the parent form doesn't seem to know they exist. My issue seems like it might be related to Angular 2: How to link form elements across a dynamically created components? but I was unable to figure out what he actually did to fix his issue.
Any thoughts?
See https://stackblitz.com/edit/angular-imi6j6?file=app%2Fapp.component.html for what I'm doing.
Wow... I just figured it out.
I was trying to add my subgroups to the parent via just assigning properties, but I should have been using FormGroup.addControl(new <FormGroup>).
Works perfectly now.
Currently Im working with Laravel and Vue, and now I want to use a 3rd party javascript library for tag-input fields. https://github.com/xoxco/jQuery-Tags-Input
I have to initialize the field in javascript by calling:
$('#tags').tagsInput();
However the tag-input field is inside of my vue component. I have tried calling this line from vue but that is not working.
Now I want to know which options do I have? Can I declare a function on my javascript and call that from within the Vue component? Can I pass the entire thing as a variable? Or are there other solutions to this case?
Someone who has experience with this and perhaps knows the right steps I have to take? Thanks in advance.
You can get vue component DOM element by this.$el. So you can do the following:
$(this.$el.querySelector('#tags')).tagsInput();
But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag
I am creating a directive that is using this timezone picker jQuery plugin, so that we have a timezone picker "widget" throughout our app. The problem I'm running into is that when you select a timezone, it just changes the value of the select elements. So, the element has the right value, but my model does not. I was thinking I just had to throw a scope.$apply() in there, but after a while, I realized that is for updating the view from a model that changed outside of angular. My problem is the opposite. How to I update my model from my view that has changed outside of angular? Here's a simple fiddle that illustrates the problem: http://jsfiddle.net/tWzwA/
I'm thinking the ngModelController could help me here, but I don't know how I would get access to it, and what exactly I would do with it. Can someone please point me in the right direction? Thanks.
You should define the update function on your controller:
$scope.updateDropDownDirectly = function(value){
$scope.myModel = value;
};
Then change the events from onclick to ng-click and let angular manage them:
<button ng-click="updateDropDownDirectly(1)">1</button>
See this jsFiddle