Пользовательский v-focus не работает, если в родительском узле есть много v-if

Я определяю пользовательскую директиву "focus" в моем компоненте:

1 ответ

Код директивы действительно работает и фокусирует .

Но он удаляется из DOM! Когда это происходит, оно теряет фокус. Проверьте консоль скрипки ниже: https://jsfiddle.net/acdcjunior/srfse9oe/21/

Другим важным моментом является то, что при вызове inserted, находится в DOM (как упоминалось выше), но он находится в DOM в неправильном месте (между

a

и <p>b</p> где он никогда не должен был быть). Это происходит потому, что Vue пытается повторно использовать элементы.

И когда nextTick запускает (см. nextTick), он находится в правильном размещении (между

c

и <p>d</p>), потому что Vue переместил его в нужное место. И это движение, которое фокусируется.

И поскольку nextTick запускается после перемещения DOM, фокус сохраняется (см. Ниже).

Использование Vue.nextTick():

Отложите обратный вызов, который будет выполнен после следующего цикла обновления DOM. Используйте его сразу после того, как вы изменили некоторые данные, чтобы дождаться обновления DOM.

new Vue({
 el: '#app',
 data() {
 return {
 show: true,
 timing: 123
 }
 },
 methods: {
 showInput() {
 this.show = false
 }
 },
 directives: {
 focus: {
 inserted: function(el) {
 Vue.nextTick(() => el.focus()); // <======== changed this line
 }
 }
 }
})
<div id="app">
 <div>
 
 <button type="button" @click="showInput" v-if="show">show</button>
 
 </div>
</div>

licensed under cc by-sa 3.0 with attribution.