Vuejs @click 事件有时会出错

Question

最近，我发现我编写的点击事件的复选框有时会出现错误。不是每次，但有时他们的@click 事件会反向工作。这就是我想说的；

  <label class="form-switch">
    <input type="checkbox" @click="showElement = !showElement"/>
  </label>

我有一个简单的表单开关，上面有一些我没有放在这里的 css，它看起来像一个拨动开关。它切换 showElement 的数据。数据的默认状态为 false，当您点击切换时，它分别变为 true 和 false。

<div v-show="showElement>
    some content here 
</div>

当showElement为true时我想显示上面的div，当它变为false时我想隐藏它。这没有问题。但这是我的问题；

如果我的观察是正确的，通常是在第一次启动项目时，换句话说，当我键入 npm run serve 并启动项目时，我会立即去检查它是否工作正常或不是这样的，所以我一遍又一遍地非常快速地点击复选框，有时点击事件会崩溃并开始倒退。我的意思是，当开关关闭时，内容可见，当它为 false 时，显示 div，但应该反转。当我浏览项目的其他页面并 return 到此组件时，有时会发生这种情况。这是一个错误吗？还是我做错了什么？在代码的第一个版本中，它如下所示；

  <label class="form-switch" @click="showElement = !showElement>
    <input type="checkbox"/>
  </label>

我不小心将点击事件输入到标签元素而不是input。我认为这可能是问题所在。我仍然认为这是问题所在，但我上面解释的错误有时仍然会发生。你知道为什么吗？谁能解释一下？

Answer 1

通常我发现在 VueJS 中使用复选框 @Click 不是可行的方法。尝试改用 @Change 事件。这应该使它更加一致。

这背后的原因是点击事件在值更新之前触发。因此存在覆盖旧值而不是新更新值的风险

编辑：

我实际上认为在这种情况下，您甚至可以通过简单地向复选框添加一个 v-model 来解决这个问题，如下所示：

v-model="showElement" 而不是 @click 或 @change。

版本 1：

   <label class="form-switch">
    <input type="checkbox" @change="showElement = !showElement"/>
  </label>

版本 2：

 <label class="form-switch">
    <input type="checkbox" v-model="showElement"/>
  </label>

检查此 fiddle：https://jsfiddle.net/x4wykp2u/4/ 希望这是有道理的

Vuejs @click 事件有时会出错

Vuejs @click event works wrong from time to time

onclick

toggle

vue.js