[Vuejs]-Vue increment value inconsistance using v-model

by

1👍

Your code should work fine as demonstrated below :

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data: function() {
    return {
      count: 1
    }
  },
  methods: {
    add(by) {
      let res = parseInt(this.count) + parseInt(by);
      this.count = res;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <button type="button" class="countpicker-dec" @click="add(-1)" :disabled="count < 2">-</button>

  <input type="number" class="countpicker-num" v-model.number="count">

  <button type="button" class="countpicker-inc" @click="add(+1)">+</button>

  <div>{{count}}</div>
</div>
👤user15118714

1👍

 add() {
   this.count += 1;
}

If just add to increment by 1 ..why pass by parameter just increases in method

👤shalini

1👍

To show the meaning this.count use

<p>{{this.count}}</p>

Shows the value you entered

<input type="number" class="countpicker-num" v-model.number="count">
👤Oleksii Zelenko

Leave a comment