Как использовать $ refs в дочернем компоненте vue для смещения фокуса?

#vue.js #vue-component

#vue.js #vue-компонент

Вопрос:

Я использую этот код для смещения фокуса между текстовыми вводимыми данными в v-for списке:

HTML

 <input :ref="'inputField'   index" @keydown.down="movedown(index)" type="text"
enter code here`v-model="todo.text">

 movedown: function(index){
 this.$nextTick(() =>
    this.$refs["inputField"   (1   index)][0].focus()
  );
}

Это отлично работает, когда поля ввода находятся в том же компоненте, что и v-for. Однако, когда я перемещаю поля ввода и код в дочерний компонент, я вместо этого получаю сообщение об ошибке «this.$refs[(«InputField» (1 индекс))] не определено«.

Вот рабочий JSFiddle, где вы можете перемещать входные данные вниз с помощью стрелки вниз: https://jsfiddle.net/Gnopps/w5xqa1r9 /

Здесь тот же код, но в дочернем компоненте, и вы больше не можете двигаться вниз: https://jsfiddle.net/Gnopps/y17en6o4 /

Есть ли у кого-нибудь идеи, как я могу это исправить, чтобы я мог смещать фокус также с полями ввода в дочернем компоненте?

1. Вы можете попробовать что-то подобное этому . При нажатии кнопки компонент отправит событие родительскому компоненту, а родительский компонент сфокусирует следующий компонент.

2. Вы получаете эту ошибку, потому что не все компоненты используют один и тот же $refs объект. У каждого из них есть свой собственный $refs объект, который заполняется тем, что вы помечаете в их шаблоне с помощью ref атрибута. Итак, вы передаете 0 в качестве index реквизита этот первый дочерний компонент, а затем, когда movedown запускается метод, он пытается получить доступ this.$refs["inputField1"][0] , который не существует, потому что единственная ссылка, которую вы определили для этого компонента, — это this.$refs["inputField0"] .

3. Отлично, спасибо @ljubadr

Ответ №1:

ответ любадра в комментариях сработал отлично. В основном переместить ref в родительский, а затем this.$refs["inputField" (1 index)][0].$el.focus() :

Вы можете попробовать что-то вроде этого. При нажатии кнопки компонент отправит событие родительскому компоненту, а родительский компонент сфокусирует следующий компонент