Vue防止模糊事件

Question

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

通过在输入字段之外单击，我使用了@blur事件。 通过单击Enter键，我会触发另一个事件。

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

Answer 1

如果隐藏div会激活模糊事件，那么您只需使Enter事件隐藏div，在两种情况下您的逻辑将只执行一次。

之前：

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

之后：

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

// methods

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

编辑：等等，您是否说过“单击回车键”？...我很困惑，您是单击还是按下键？ 如果您的问题是同时使用@blur和@click，则已经对此提出了很多问题，例如this one。