Issue involving if statements and Vue.js causing counter to reset

Question

Issue involving if statements and Vue.js causing counter to reset

I am currently working on a simple code snippet that updates a counter each time a specific button is clicked. The counter restarts once it reaches 3 and the number is displayed on each button. Everything seems to be functioning correctly, but I have come across a strange issue - if the first button does not start at 0, clicking any other button will reset the first button's value back to 0. Could this suggest that the buttons are somehow connected?

new Vue({
  el: "#app",
  data: {
    one: 0,
    two: 0,
    three: 0
  },
  methods: {
    chooseOne: function(x, y) {
      if ((x == 1) && (this.one < 3)) {
        this.one++;
      } else {
        this.one = 0
      }
      if (x == 2) {
        if ((x == 2) && (this.two < 3)) {
          this.two++;
        } else {
          this.two = 0
        }
      }
      if (x == 3) {
        if ((x == 3) && (this.three < 3)) {
          this.three++
        } else {
          this.three = 0
        }
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="chooseOne(1,one)">
      {{ one }}
     </button>
  <button @click="chooseOne(2,two)">
      {{ two }} 
     </button>
  <button @click="chooseOne(3,three)">
      {{ three }}
     </button>
</div>

javascript if-statement vue.js

Answer 1

Answer №1

Your if-else statement lacks consistency in handling all values of x. It checks for nested conditions when x is 2 and 3, but not when x is 1. Specifically, when x = 2, the condition is evaluated as false.

if ((x == 1) && (this.one < 3))

Therefore, the statement this.one = 0 is executed whenever the second or third button is clicked.

To rectify this issue, you should include a similar check for x equals to 1:

  if (x == 1) {
    if (this.one < 3) {
      this.one++;
    } else {
      this.one = 0
    }
  }

An alternative approach to streamline your code is by passing the property name as a parameter, like so:

new Vue({
  el: "#app",
  data: {
    one: 0,
    two: 0,
    three: 0
  },
  methods: {
    chooseOne: function(prop) {
      if (this[prop] < 3) {
        this[prop]++
      } else {
        this[prop] = 0
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="chooseOne('one')">
      {{ one }}
     </button>
  <button @click="chooseOne('two')">
      {{ two }} 
     </button>
  <button @click="chooseOne('three')">
      {{ three }}
     </button>
</div>

Answer 2

Your if-else statement lacks consistency in handling all values of x. It checks for nested conditions when x is 2 and 3, but not when x is 1. Specifically, when x = 2, the condition is evaluated as false.

if ((x == 1) && (this.one < 3))

Therefore, the statement this.one = 0 is executed whenever the second or third button is clicked.

To rectify this issue, you should include a similar check for x equals to 1:

  if (x == 1) {
    if (this.one < 3) {
      this.one++;
    } else {
      this.one = 0
    }
  }

An alternative approach to streamline your code is by passing the property name as a parameter, like so:

new Vue({
  el: "#app",
  data: {
    one: 0,
    two: 0,
    three: 0
  },
  methods: {
    chooseOne: function(prop) {
      if (this[prop] < 3) {
        this[prop]++
      } else {
        this[prop] = 0
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="chooseOne('one')">
      {{ one }}
     </button>
  <button @click="chooseOne('two')">
      {{ two }} 
     </button>
  <button @click="chooseOne('three')">
      {{ three }}
     </button>
</div>

Answer 3

Answer №2

It seems like your initial conditional statement is incorrect. The condition you have set is if (x == 1) else variable one will be reset to 0. However, when the second or third button is clicked and x is not equal to 1, the button's text resets even though there is no direct connection between these buttons.

new Vue({
  el: "#app",
  data: {
    one: 0,
    two: 0,
    three: 0
  },
  methods: {
    chooseOne: function(x, y) {
      if (x == 1) {
        if ((x == 1) && (this.one < 3)) {
          this.one++;
        } else {
          this.one = 0
        }
      }
      if (x == 2) {
        if ((x == 2) && (this.two < 3)) {
          this.two++;
        } else {
          this.two = 0
        }
      }
      if (x == 3) {
        if ((x == 3) && (this.three < 3)) {
          this.three++
        } else {
          this.three = 0
        }
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="chooseOne(1,one)">
      {{ one }}
     </button>
  <button @click="chooseOne(2,two)">
      {{ two }} 
     </button>
  <button @click="chooseOne(3,three)">
      {{ three }}
     </button>
</div>

Answer 4

It seems like your initial conditional statement is incorrect. The condition you have set is if (x == 1) else variable one will be reset to 0. However, when the second or third button is clicked and x is not equal to 1, the button's text resets even though there is no direct connection between these buttons.

new Vue({
  el: "#app",
  data: {
    one: 0,
    two: 0,
    three: 0
  },
  methods: {
    chooseOne: function(x, y) {
      if (x == 1) {
        if ((x == 1) && (this.one < 3)) {
          this.one++;
        } else {
          this.one = 0
        }
      }
      if (x == 2) {
        if ((x == 2) && (this.two < 3)) {
          this.two++;
        } else {
          this.two = 0
        }
      }
      if (x == 3) {
        if ((x == 3) && (this.three < 3)) {
          this.three++
        } else {
          this.three = 0
        }
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="chooseOne(1,one)">
      {{ one }}
     </button>
  <button @click="chooseOne(2,two)">
      {{ two }} 
     </button>
  <button @click="chooseOne(3,three)">
      {{ three }}
     </button>
</div>

Answer 5

Answer №3

There seems to be an issue with the condition check in your code. Consider trying this solution instead:

chooseOne(x, y) {
      if (x == 1) {
        this.one <3  ? this.one++ : this.one = 0
      } 
      if (x == 2) {
      this.two <3  ? this.two++ : this.two = 0
      }
      if (x == 3) {
       this.three < 3 ? this.three++ : this.three = 0
      }
    }

Answer 6

There seems to be an issue with the condition check in your code. Consider trying this solution instead:

chooseOne(x, y) {
      if (x == 1) {
        this.one <3  ? this.one++ : this.one = 0
      } 
      if (x == 2) {
      this.two <3  ? this.two++ : this.two = 0
      }
      if (x == 3) {
       this.three < 3 ? this.three++ : this.three = 0
      }
    }

Answer 7

Answer №4

It is important to practice writing DRY (Don't Repeat Yourself) code when developing software:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data: {
    one: 0,
    two: 0,
    three: 0,
    buttons: ['one', 'two', 'three']
  },
  methods: {
    chooseOne: function(y) {
      this[y] = this[y] < 3 ? this[y] + 1 : 0
    },
    getButton(button) {
      return this[button];
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-for="button in buttons" @click="chooseOne(button)">
      {{ getButton(button) }}
  </button>
</div>

By following the DRY principle, all your buttons go through the same process, eliminating the risk of inconsistencies, making the code more reliable.

Answer 8

It is important to practice writing DRY (Don't Repeat Yourself) code when developing software:

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: "#app",
  data: {
    one: 0,
    two: 0,
    three: 0,
    buttons: ['one', 'two', 'three']
  },
  methods: {
    chooseOne: function(y) {
      this[y] = this[y] < 3 ? this[y] + 1 : 0
    },
    getButton(button) {
      return this[button];
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button v-for="button in buttons" @click="chooseOne(button)">
      {{ getButton(button) }}
  </button>
</div>

By following the DRY principle, all your buttons go through the same process, eliminating the risk of inconsistencies, making the code more reliable.

Issue involving if statements and Vue.js causing counter to reset

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issue encountered when retrieving the ID of the active tab in a Google Chrome extension using Manifest V3: Uncaught TypeError - Unable to access properties of undefined while trying to read 'id'

AngularJS directive for incorporating additional directives lacks functionality

Exploring Jasmine and AngularJS: Testing a factory function in the context of dependency injection

A script page in Wordpress generates a numerical value in the URL

Obtain the value of the jQuery UI slider by interacting with the

What is the best way to import files in nodejs for tsc build and ts-node-dev compatibility?

Submitting requests in Node.js Express

Is it possible for the *ngIf directive to stop unauthorized users from accessing my admin page through their browsers?

"Implementing Spring WebFlux to enhance security with JWT and CSRF tokens

Confusion in JSON encoding, parsing, and function calling

Should loaders be utilized in an Angular application?

Can I obtain a link through the branch_match_id parameter?

Utilizing ng For in a personalized directive to fill a selection menu

Can a FilePicker be Cleared Automatically through Code?

Implement a time delay in the jQuery each function following an AJAX request

There seems to be an issue with the functionality of the operators in the Calculator Javascript

Clearing up memory in ThreeJS application

Can JavaScript be used to modify the headers of an HTTP request?

Attempting to modify the background color of an iFrame in Internet Explorer

What could be causing npm to fail to launch?