CODEWITHSUNDEEP
javascriptvue.js
Hung Tran
Hung Tran

Reputation: 815

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

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?

Upvotes: 4

Views: 34693

Answers (2)

taggon
taggon

Reputation: 1936

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>

Upvotes: 1

hashchange
hashchange

Reputation: 7225

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.

Upvotes: 10

Related Questions