Question

我是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更新值时同步吗？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: