[Vuejs]-Bug with if statements and vuejs restart counter

by

4👍

✅

Your if-else is not consistent for all x. For 2 and 3, you have a nested check but not for 1. When x = 2, this condition is false

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

So, this.one = 0 is called whenever the second or third button is clicked

Add a similar check for 1

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

You can simplify your code to pass the name of the property like this to avoid multiple checks

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>
👤adiga

1👍

Your first conditional statement is wrong. Your condition is if (x == 1) else variable one reset to 0. When the second or third button is clicked, x !== 1, that’s why the button’s text reset while there is not any link between these button

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>
👤vicnoob

1👍

You should be writing DRY code: 

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>

… which solves your problem because all your buttons run through the same routine, therefore the risk of inconsistency is null.

👤tao

1👍

the issue is your condition check. try this. 

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
      }
    }
👤kcsujeet

Leave a comment