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

Question

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

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?

hashchange · Accepted Answer · 2015-11-05 09:45:56Z

10

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

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

The button must be part of the app template in this case, otherwise the v-on: event binding doesn't work.

edited Nov 5, 2015 at 9:45

answered Nov 5, 2015 at 9:29

hashchange

7,2651 gold badge49 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hung Tran Over a year ago

Thank you for your detailed answer!

hashchange Over a year ago

@HungTran my pleasure :)

nicholaides · Accepted Answer · 2017-08-25 15:21:03Z

1

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

edited Aug 25, 2017 at 15:21

nicholaides

19.6k13 gold badges70 silver badges83 bronze badges

answered Nov 5, 2015 at 9:10

taggon

1,93614 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related