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

Question

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 ?

user125661 · Accepted Answer · 2020-05-16 14:34:35Z

2

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

answered May 16, 2020 at 14:34

user125661

1,56814 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related