Vue.js - Vモデルは、私は次の隠し入力持っている隠された入力

Question

を結合：私は隠された値を設定し、私のjavascriptのfucntionで

<input id="myHiddenInput" 
    name="myHiddenInput" 
    type="hidden" 
    v-model="comment.myHiddenInput" 
    v-on:change="comment.myHiddenInput=$event.target.value"> 

var app = new Vue({ 
    el: '#app', 
    data: { 
    comment: {'myHiddenInput': ''} 
    } 
}) 

を、次のように変更イベントをトリガー：

var myFunction = function() { 

    $('#myHiddenInput').val(JSON.stringify(hiddentStuff)).trigger('change'); 

}; 

しかし、上記はうまくいきません。つまり、双方向バインディングは機能しません。

しかし、私はこれを行う場合、それは動作します：独自に.trigger('change')十分ではありませんなぜ

var myFunction = function() { 

    $('#myHiddenInput').val(JSON.stringify(hiddentStuff)).trigger('change'); 
    document.getElementById('myHiddenInput').dispatchEvent(new Event('change')); 

}; 

は、なぜ私はdispatchEvent(new Event('change')) aswellを呼び出すために必要なのですか？

Answer 1

このように、Vueと一緒にjqueryを使用しないことをお勧めします。

は代わりにバインドさオブジェクトにVUEの方法を変更してください：

this.comment.myHiddenInput = JSON.stringify(hiddentStuff); //Your new value here 

これは、入力を自動的に更新しても変更がトリガされます。