Vue 防止模糊事件答案

【问题标题】：Vue prevent blur eventVue 防止模糊事件
【发布时间】：2019-07-07 14:18:14
【问题描述】：

我有一个可编辑的输入组件，它的状态为isEditable。

通过单击输入字段外部，我使用@blur 事件。通过点击回车键，我触发了另一个事件。

两种方法使用相同的逻辑，在逻辑完成后，我将isEditable设置为false。在这种情况下，会以某种方式触发模糊事件。（我猜是因为输入字段消失了（我猜是因为它使用了v-if="isEditable"）。有什么方法可以防止通过以编程方式更改状态来触发模糊？

【问题讨论】：

【解决方案1】：

如果隐藏 div 会激活 blur 事件，那么你可以让 keypress Enter 事件隐藏 div，你的逻辑在这两种情况下都只会执行一次。

之前：

@blur="myLogic"
@keyup.enter="myLogic"

之后：

@blur="myLogic"
@keyup.enter="willActivateBlur"

// methods

willActivateBlur: function() {
  this.isEditable = false
}

编辑：等等，你是说“点击回车键”吗？...我很困惑，你是点击还是按下键？如果你的问题是同时使用@blur 和@click，那么已经有很多问题被问到了，比如this one。

【讨论】：