Vue предотвратит размытие

Question

У меня есть редактируемый компонент ввода, который имеет состояние isEditable.

При нажатии за пределами поля ввода я использую событие @blur.Нажав на клавишу ввода, я запускаю другое событие.

Оба метода используют одну и ту же логику, и после ее завершения я установил 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 .