[Vuejs]-Why Vue.js @input event isn't fired when button is clicked?

by

0👍

You can invoke alert method from inside add method:

add: function() {
  this.count += 1;
  // invoke alert()
  this.alert();
}

0👍

I am sure its @change not @input:

<input type="text" v-model.number="count" @change="alert">

Alternatively:

watch : {

   number: function (newVal) {

     alert();

  }

}

0👍

@input isn’t for any changes to an input tag; it’s specifically triggered when a user directly modifies the input tag. You want something like watch:

new Vue({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    add: function() {
      this.count += 1
    }
  },
  watch: {
    count: function() {
      alert('Count has been changed!')
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model.number="count" />
  <button @click="add">+1</button>
</div>

Leave a comment