当绑定的输入字段的值被 JavaScript 更改时自动更新 vue.js 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33540075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update vue.js data automatically when binded input field's value is changed by JavaScript
提问by Hung Tran
I'm new to vue.js. It seems Two-way bindingof vue.js only listens to input event from user, if you change value by JS, vue.js's value is not updated
我是 vue.js 的新手。这似乎双向绑定vue.js只监听输入事件的用户，如果通过JS改变时，不更新vue.js的价值
Here is an example for what I mean:
这是我的意思的一个例子：
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>If you click "Set new value" button, the field's value is changed to "New value" but the text above it is still "Old value" instead of "New value". But if you change the text in the field directly, the text above is changed synchronously.
如果单击“设置新值”按钮，该字段的值将更改为“新值”，但其上方的文本仍然是“旧值”而不是“新值”。但是如果直接更改字段中的文本，则上面的文本是同步更改的。
Is there anyway we can do this synchronous when updating value with JavaScript?
无论如何，我们可以在使用 JavaScript 更新值时同步执行此操作吗？
回答by hashchange
Besides using $set, as @taggon suggested, you can also work with the data model directly.
除了使用$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>Or better still, manipulate the data with a method of your Vue instance, and use v-on:to handle the clickevent:
或者更好的是，使用 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>The buttonmust be part of the apptemplate in this case, otherwise the v-on:event binding doesn't work.
在button必须的一部分，app在这种情况下模板，否则v-on:事件绑定不起作用。
回答by taggon
Use $setinstead of accessing the DOM element directly. Do not mutate the model through DOM API.
使用$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>