I'm new to Vuejs and my requirement is to write a single functional globally to trigger whenever v-model value of my form elements are set. I tried to write this for element.onchnage but this is not working.
Can some one tell me which HTML event is triggered when the v-model value is set in vuejs ?
Hey Linu and welcome to SO.
Check out the docs for Form input bindings:
https://v2.vuejs.org/v2/guide/forms.html
There it says:
v-model internally uses different properties and emits different
events for different input elements:
text and textarea elements use value property and input event
checkboxes and radiobuttons use checked property and change event;
select fields use value as a prop and change as an event.
So instead of v-model you can do the following for inputs
<input :value="dataProperty" #input="dataProperty = $event.target.value" />
Related
<input type="radio" :value="myValue" v-model="value" />
I'm trying to create a radio button and wrap it in a component, so value becomes a variable. The problem is that I'm getting the following error:
:value="myValue" conflicts with v-model on the same element because the latter already expands to a value binding internally
I've tried to replace v-model with direct bindings but I cannot replicate the same functionality. Why does this error appear in this case? This is taken directly from official docs for the radio buttons.
v-model is just shorthand for :value="someVar" #input="someVar = $event". meaning you are assigning the value twice. Depending on your need you can do :value="someVar" and then have a custom function handle the input like so:
#input="someFunc" this function would accept the input (by default) and then you could update myVar as you desire.
See here for a more detailed explanation
With VueJS, I have two seperate components.
A modal and a form.
In the modal form, the user inputs a PIN that gets confirmed then this value is set to an input tag in the form to basically save this value.
In the modal component, I set the value simply like this:
document.getElementById('pin').value = this.pin_input;
Within the form component, the input tag is like this:
<input type="hidden" #change="submit()" id="pin">
In the console, the value of this input tag get's set correctly, though the #change="submit()" is not getting called when the values changes.
submit method code within form component that is not getting called:
methods : {
submit : function(){
console.log("SUBMIT HERE");
}
}
Why is my input tag's #change not getting called?
Setting the value on a DOM element does not fire the input / change events. This is why the event listener you set in vue is not called.
You can fire those events manually, they will then be picked up by vue.
var element = document.getElementById('pin');
element.value = this.pin_input;
// Works in most modern browsers.
var event = new Event('change');
element.dispatchEvent(event);
From my point of view, For communication between components it's better to use:
some state management like Vues https://vuex.vuejs.org/, and save input value in separate store
or
try with custom methods https://v2.vuejs.org/v2/guide/components-custom-events.html
use parent component and pass callback into child components.
#change will not work in your case
I use https://github.com/Dimox/jQueryFormStyler for styling form inputs.
I set the property ng-model="c.model.acept".
If I click on "styled checkbox", then input gets to property "checked", but the angular model still has the old value.
I tried to trigger the change event with no result.
If I trigger the click event, then the checkbox gets changed twice (once from click, and then the second time from the triggered click event).
How to fix it?
You can not change "ng-model" of particular input field conditionally.
In this condition what you can do is, keep two input field and use "ng-show" or "ng-if" attribute to show & hide input field conditionally.
Hope this will hep you.
I have the following:
<span>{{m.search_type}}</span>
{{input value=m.search_type}}
I retrieve the search_type with
this.get(search_type) in the controller that handles the form submission.
However, when I change the input value, the value within the <span>..</span> will change. This is the defined behavior in the docs.
I want the span to be the title for the input field and to not change along with the value of search_type. Search type is dynamic so I can't just hardcode the value for {{m.search_type}}.
Is there a way to do this? I tried creating a EmberJS Helper to map the value to a new string but this still changes whenever search_type changes.
Properties are always bound by default. Use the unbound helper to unbind the property.
<span>{{unbound m.search_type}}</span>
{{input value=m.search_type}}
I have a checkbox being controller by a Knockout observable, but in a custom binding, the element is not checked.
<input type="checkbox" data-bind="checked: isChecked, highlightIfChecked: 'test'"/>
The element is checked and unchecked on the page, but in the highlightIfChecked custom binding, it is not. I'm using $(elem).is(":checked").
JSFiddle: http://jsfiddle.net/JgLck/
How can I get the element to be checked in the custom binding?
The setting of the element's checked value happens in the checked binding's update function. Currently, all of the init functions run before the update functions for the bindings on an element.
So, if you switched your custom binding to use update instead of init, then you would see the right value.
Also, you would need to change your isChecked value into an observable, if you want the binding to trigger again. Note that in KO 3.0, bindings will be processed independently, so your custom binding would need to access isChecked to create a dependency.
http://jsfiddle.net/rniemeyer/eXEmM/