I'm new to vue.js. It seems Two-way binding of vue.js only listens to input event from user, if you change value by JS, vue.js's value is not updated

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=".js"></script>

<div id="app">
  <p>{{ message }}</p>
  <input id="my-field" v-model="message">
</div>
    
<button onclick="setNewValue()">Set new value</button>

I'm new to vue.js. It seems Two-way binding of vue.js only listens to input event from user, if you change value by JS, vue.js's value is not updated

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/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
• vue.js

2 Answers 2

Besides using $set, as @taggon suggested, you can also work with the data model directly.

function setNewValue() {
    model.message = 'New value';
}

var model = {
        message: 'Old value'
    },

    app = new Vue({
        el: '#app',
        data: model
    });

<script src="https://cdn.jsdelivr/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 click event:

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

<script src="https://cdn.jsdelivr/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 button must be part of the app template in this case, otherwise the v-on: event binding doesn't work.

Use $set instead of accessing the DOM element directly. Do not mutate the model through 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/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>