Counter not increment in vue.js

Question

I have a button and added a click event on which data value increment by 5 but it is appended by 5

https://jsfiddle.net/neyaz90/dkvmmrbd/

<div id="react">
<button @click='counter += 5'>Increment</button>
<p>{{result}}</p>

new Vue({
el:'#react',
data:{
counter:'0'
},
computed:{
  result:function(){
    return this.counter;
 }
}
});

please help in this.

Answer 1

You need to use a Number instead of a String for 0 See jsfiddle here.

HTML

<div id="react">
  <button @click="counter += 5">Increment</button>
  <p>{{ result }}</p>
</div>

JS

new Vue({
  el: '#react',
  data: {
    counter: 0
  },
  computed: {
    result: function() {
      return this.counter;
    }
  }
})

Answer 2

counter is defined with '0'(String) instead of 0(number).

You also don't need the computed value to show the result.

Only {{counter}} would be enough.