Vue.js Vuejs@click事件有时会出错

最近，我注意到我写的点击事件的复选框有时工作不正确。并非每次都是如此，但有时他们的@click事件会起相反的作用。这就是我想说的

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

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

如果我的观察是正确的，通常是在项目第一次启动时，换句话说，当我键入

npm run serve

并启动项目时，我会立即去检查它是否正常工作，因此我会反复快速地点击复选框，有时点击事件会发生故障并开始反向工作。我的意思是，当开关关闭时，内容是可见的，当它为false时，div显示，但应该反转。当我浏览项目的其他页面并返回到该组件时，有时会发生这种情况。这是虫子吗？还是我做错了什么？在代码的第一个版本中，它如下所示

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

---

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

这背后的原因是，单击事件在值更新之前触发。因此，会产生覆盖旧值而不是新更新值的风险

编辑：

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

v-model=“showElement”而不是@click或@change

Verison 1：

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



第2版：

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



检查这把小提琴：
希望这是有意义的
如果您将单击事件放入输入中，它是否改善了行为？正如我前面提到的，我意外地在label元素而不是输入中键入了click=“showElement=！showElement”部分。这就是问题的根源。现在它可以正常工作了，但我会根据变化修改它们。这帮了大忙。我不知道在值更新之前点击触发的事情。
 <label class="form-switch">
    <input type="checkbox" v-model="showElement"/>
  </label>