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

Update vue.js data automatically when binded input field's value is changed by JavaScript

我是 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>

如果单击 "Set new value" 按钮,该字段的值将更改为 "New value",但其上方的文本仍为 "Old value" 而不是 "New value"。但如果直接更改字段中的文本,则上面的文本会同步更改。

在使用 JavaScript 更新值时,我们是否可以同步执行此操作?

使用 $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>

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