Vuejs @click 事件有时会出错

Posted 2023-02-16

【中文标题】Vuejs @click 事件有时会出错

【英文标题】：Vuejs @click event works wrong from time to time

【发布时间】：2021-04-01 23:59:30

【问题描述】：

最近，我注意到我编写单击事件的复选框有时会出现错误。不是每次，但有时他们的@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并启动项目时，我立即去检查它是否工作正常，然后我点击在复选框上非常快速地一遍又一遍，有时点击事件会中断并开始向后工作。我的意思是，当开关关闭时，内容可见，当它为假时，显示div，但应该反转。当我浏览项目的其他页面并返回此组件时，有时会发生这种情况。这是一个错误吗？还是我做错了什么？在代码的第一个版本中，如下所示；

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

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

【问题讨论】：

如果您将该点击事件放入输入中，是否会改善行为？

【参考方案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>

检查这个小提琴：https://jsfiddle.net/x4wykp2u/4/ 希望这是有道理的

【讨论】：

正如我上面提到的，我不小心在标签元素中输入了 click="showElement = !showElement" 部分，而不是在输入中。所以导致了这个问题。现在它工作正常，但我会将它们修改为更改。这有很大帮助。在值更新之前我不知道关于点击触发的事情。