当绑定输入字段的值被JavaScript更改时，自动更新vue.js数据

Question

我是vue.js的新手。 似乎vue.js 的双向绑定只监听来自用户的输入事件，如果你通过JS改变值，则vue.js的值不会更新

这是我的意思的一个例子：

 function setNewValue() { document.getElementById('my-field').value = 'New value'; } new Vue({ el: '#app', data: { message: 'Old value' } }) 

 <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <div id="app"> <p>{{ message }}</p> <input id="my-field" v-model="message"> </div> <button onclick="setNewValue()">Set new value</button> 

如果单击“设置新值”按钮，则字段的值将更改为“新值”，但其上方的文本仍为“旧值”而不是“新值”。 但是，如果直接更改字段中的文本，则会同步更改上面的文本。

无论如何我们可以在使用JavaScript更新值时同步吗？

Answer 1

除了使用$set ，如@taggon所建议的那样，您还可以直接使用数据模型。

 function setNewValue() { model.message = 'New value'; } var model = { message: 'Old value' }, app = new Vue({ el: '#app', data: model }); 

 <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <div id="app"> <p>{{ message }}</p> <input id="my-field" v-model="message"> </div> <button onclick="setNewValue()">Set new value</button> 

或者更好的是，使用Vue实例的方法操作数据，并使用v-on:来处理click事件：

 var app = new Vue({ el: '#app', data: { message: 'Old value' }, methods: { setNewValue: function () { this.message = 'New value'; } } }); 

 <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <div id="app"> <p>{{ message }}</p> <input id="my-field" v-model="message"> <button v-on:click="setNewValue">Set new value</button> </div> 

在这种情况下， button必须是app模板的一部分，否则v-on:事件绑定不起作用。

Answer 2

使用$set而不是直接访问DOM元素。 不要通过DOM API改变模型。

 function setNewValue() { app.$set(app.$data, 'message', 'New value'); } var app = new Vue({ el: '#app', data: { message: 'Old value' } }); 

 <script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script> <div id="app"> <p>{{ message }}</p> <input id="my-field" v-model="message"> </div> <button onclick="setNewValue()">Set new value</button>