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

Angular component injected with stub service is returning incorrect value

What is the best way to show instructions immediately upon receipt of a response?

I'm struggling to incorporate the JQuery slideDown function into my code. Can someone lend a hand?

Tips for managing the return value of a PHP function in AJAX requests

Exploring Angular 4.0: How to Loop through Numerous Input Fields

Leveraging Angular2's observable stream in combination with *ngFor

Enhancing OpenAI API Responses with WebSocket Streaming through Express Middleware Integration

Leveraging the content delivery network for react-select in a react.js project

The innerHTML of the p tag remains unaffected when using document.getElementsById("")

Struggling to make cookies stick in IE9

Angular JS | Sending information to two separate controllers when clicked

An easy way to activate the save button automatically

Different ways to save data fetched from a fetch request

Maximizing Particle Performance Using JavaScript

Do I need to generate a sitemap for data retrieved from a database in NextJS?

Utilize time in submitting a form

Form featuring a mandatory checkbox that must be selected in order to proceed; failure to do so will result in an

Is it preferable to share the .vue file or the compiled component in Vue?

Eliminate the ArrayOfObjects by filtering out the items with a specific ID

issue retrieving data from live website created with next.js