v-model not working with input type hidden

[gapipro]

Don't know if I missed something but v-model doesn't seem to update it's value when value of hidden input changes.

Example: http://jsfiddle.net/zvjE6/

[gaydenko]

In the handler you need to change the model: this.type = 'pro';, but you are changing directly DOM element ('document.querySelector...`).

[gapipro]

Yes. I made that on purpose, because I have an external library that changes hidden inputs values and I need that changes reflected to vue data model.

[gaydenko]

At such case (interaction between different worlds) I would use events sending (pub/sub). I guess it is conceptually correct: different worlds can not share data but can send messages to each other. But, I see, probably, that external library isn't events aware.

[yyx990803]

Vue does not detect the changes when directly setting value on input elements, that is by design. If you know when your external lib has changed the input value, you can manually trigger a change event on your input element to notify Vue to sync the value back to the model.

[gapipro]

Yes I solved this problem doing just that.

[SimonEast]

For others searching for this, the following jQuery code can be used to force Vue to update it's data once the value of the hidden field is changed (generally from some other external plugin or library)...

var input = $(#myHiddenInput');
input.val('Set new value');
input.trigger('change');

[vad11]

Please see #6135