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:事件绑定不起作用。