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

您的第一个条件语句是错误的。您的条件是（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>

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

问题是您的状况检查。尝试这个。

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

错误与if语句和vuejs重新启动计数器

4 个答案: