javascriptvue.jsonclickvue-events

VUE JS : Onclick did not increment the score as expected

Hey there i'm working on a simple game where if user click the button then the score will be plus i.e. 1.

new Vue({
  el: '#MyApp',
  data: {
    score: '10',
  },
  methods: {
    ScoreIncre: function(incre) {
      this.score += incre;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="MyApp">
  <p>My Score is {{score}</p>
  <button v-on:click="ScoreIncre(1)">Increase my Score</button>
</div>

Once button is clicked so instead of adding score by +1 it is displaying the output as 'My Score is 101'. What would be the possible cause of it? I have tried to parse the 'incre' to int but the result was same.

Solution

  • '10' is string. You need

    data: {
    score: 10,
}