Issue with VUE JS: Score not increasing on click event as desired

Question

Issue with VUE JS: Score not increasing on click event as desired

Greetings! I've been working on a basic game that increments the score by 1 when the user clicks a button.

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>

After clicking the button, instead of adding 1 to the score, it displays as 'My Score is 101.' What could be causing this issue? I attempted to parse 'incre' as an integer, but the result remained the same.

javascript vue.js onclick vue-events

Answer 1

Answer №1

'10' is considered a string in this scenario. To properly assign it as a number, you should use:

data: {
    score: 10,
}

Answer 2

'10' is considered a string in this scenario. To properly assign it as a number, you should use:

data: {
    score: 10,
}

Answer 3

Answer №2

When working with the value '10' as a string instead of a number, it's important to remember that '10'+1 will result in '101' rather than 11. To avoid this issue, make sure to use the actual number 10 instead of the string '10'.

Answer 4

When working with the value '10' as a string instead of a number, it's important to remember that '10'+1 will result in '101' rather than 11. To avoid this issue, make sure to use the actual number 10 instead of the string '10'.

Answer 5

Answer №3

'10' within your code is considered a string, not a number. This prevents you from incrementing it. To resolve this issue, declare the number without quotes either as 10

Answer 6

'10' within your code is considered a string, not a number. This prevents you from incrementing it. To resolve this issue, declare the number without quotes either as 10

Answer 7

Answer №4

It is important to keep the value 10 as a number and not a string. Also, don't forget to add a closing curly brace } in your template.

Here is a snippet for reference:

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>

Answer 8

It is important to keep the value 10 as a number and not a string. Also, don't forget to add a closing curly brace } in your template.

Here is a snippet for reference:

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>

Issue with VUE JS: Score not increasing on click event as desired

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Form submission not being recognized by Ajax's .done() function

Deliver integers using Express.js

What occurs when socket.io events are not properly handled?

Sort the array by the elements in a separate array

Checking to see if an object is null using Javascript/AngularJS

Activate automatic selection when the input field is disabled

Which option's value was recently removed from the fetch command?

What is the best method for translating object key names into clearer and easier to understand labels?

Is it possible to eliminate auxiliary routes in Angular 4?

What is the significance of using index 0 for caching an ID in jquery?

Error message 'Access is Denied' occurs when using Angular.js xhr.open()

Guide to replacing a value in a div within a personalized dropdown using VUE JS

Error message: Unexpected token discovered, Functioned correctly on Windows yet encountering issues on the VPS. Any suggestions for resolving this?

Tips for uploading files in filepicker with protractor

Is a function repeatedly invoked?

Change background according to URL query

Deriving variable function parameters as object or tuple type in TypeScript

Tips for parsing CSV files using d3 version 4

Animated Debugging with Node.js

The class styling is malfunctioning