ошибка с инструкциями if и счетчиком перезапуска vuejs

Question

Я пишу простой кусок кода, который увеличивает счетчик каждый раз, когда вы нажимаете определенную кнопку, и он перезапускается, когда вы достигаете 3, число отображается в каждой кнопке, кажется, работает нормально, но у меня странная ошибка: если первая кнопка не установлена ​​в 0, когда вы нажимаете любую другую кнопку, она перезапускает первую кнопку обратно в 0. Кажется, что кнопки каким-то образом связаны?

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>

Answer 1

Ваш if-else не согласован для всех x.Для 2 и 3 у вас есть вложенная проверка, но не для 1. Когда x = 2, это условие ложно

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

Так, this.one = 0 вызывается всякий раз, когда нажимается вторая или третья кнопка

Добавьте аналогичную проверку для 1

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

Вы можете упростить свой код, чтобы передать имя свойства таким образом, чтобы избежать многократных проверок

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

проблема в проверке вашего состояния.попробуй это.

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 3

Вы должны написать DRY код:

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>

... которая решает вашу проблему, потому что все ваши кнопки выполняются в одной и той же процедуре, поэтому риск несоответствия составляет null.

Answer 4

Ваше первое условное утверждение неверно.Ваше условие, если (x == 1) остальная переменная 1 сбрасывается в 0. Когда нажата вторая или третья кнопка, x! == 1, поэтому текст кнопки сбрасывается, пока между этими кнопками нет никакой ссылки

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>