CODEWITHSUNDEEP
vue.jsvuejs2v-model
MANnDAaR
MANnDAaR

Reputation: 2590

Vue JS v-model value update not working for on-click events

I have a application where I'm updating value of input element on button click.

I'm using Vue JS v-model for data binding.

HTML :

<div id="app">
<div>{{ response }}</div> <br>
 <input type="text" v-model="response.ruleName" value="" placeholder="" class="editing">
 <button @click="myalert">Click me</button>
</div>

JS :

var response = {
    ruleName: "ruleJohn",
}
new Vue({
  el: "#app",
  data () {
        return {
            response
        }
  },
  methods: {
    myalert: function(e) {
      document.querySelector('.editing').value = e.target.innerText;
        },

  }
})

Here is working fiddle : https://jsfiddle.net/38Lj971g/

Now, When I try to edit input value with keyboard, response values does change.

When I try to click button, Though input value changes but response doesn't.

How to deal with v-model for such on-click data updates ?

Upvotes: 1

Views: 3134

Answers (1)

user125661
user125661

Reputation: 1568

Don't edit the input value directly, instead edit the v-model it gets its data from, like so:

<button @click="response.ruleName = 'Click me'">Click me</button>

or, if you wish to use the method:

myalert: function(e) {
  this.response.ruleName = e.target.innerText;
}

Upvotes: 2

Related Questions