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

【问题标题】：Update vue.js data automatically when binded input field's value is changed by JavaScript当绑定的输入字段的值被 JavaScript 更改时自动更新 vue.js 数据
【发布时间】：2015-11-05 08:50:35
【问题描述】：

我是 vue.js 的新手。 vue.js 的Two-way binding 似乎只监听用户的输入事件，如果你通过 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 更新值时，我们是否可以同步执行此操作？

【问题讨论】：

标签： javascript vue.js

【解决方案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: 事件绑定不起作用。

【讨论】：

感谢您的详细解答！
@HungTran 我的荣幸 :)

【解决方案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>

【讨论】：