VUE JS : Onclick did not increment the score as expected

Question

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.

score 2 · Accepted Answer · answered Mar 30 '21 at 10:31

2

'10' is string. You need

data: {
    score: 10,
}

answered Mar 30 '21 at 10:31

apple apple

10,292
2
16
36

score 1 · Answer 2 · answered Mar 30 '21 at 10:30

1

Because score is '10' so it is a string not a number this is why when you increment '10'+1 it's '101' not 11 , you should change '10' by 10

answered Mar 30 '21 at 10:30

A.Missourisql

51
3

score 1 · Answer 3 · answered Mar 30 '21 at 10:32

1

'10' in your code is a string and not a number. That's why you can't increment it. Declare that as a number or without quotes like: 10

answered Mar 30 '21 at 10:32

Thinking of a name

57
8

score 1 · Answer 4 · answered Mar 30 '21 at 10:34

You need to keep 10 as number, not String, beside, you are missing a curly ending brace } in your template.

Check snippet:

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>

VUE JS : Onclick did not increment the score as expected

4 Answers4