Как установить фокус на текстовой области, которая отображается внутри v-for в Vuejs 2?

Question

В моем компоненте Vue.js я рендерил строки таблицы, содержащие textarea, на основе списка элементов следующим образом:

<template>
    <div>
       <table>
           <tr v-for="(item, index) in items">
               <td>{{ index }}</td>
               <td><textarea v-model="item.message"></textarea></td>
           </tr>
       </table>
    </div>
</template>
<script>
    export default {
        data: {
            items: [
               { message: 'Foo' },
               { message: 'Bar' }
            ]
        }
    };
</script>

Когда я щелкаю в любом месте строки, я хочу textareaвнутри этого ряда, чтобы быть сосредоточенным.Как я могу это сделать?

Следующий код не может решить проблему:

 this.$refs.myTextArea.focus();

Это работает только с элементом с уникальным ref id и за пределами v-for.

Answer 1

Попробуйте указать уникальное имя ссылки для каждой текстовой области, например:

    <tr v-for="(item, index) in items" @click="focus('ta'+index)">
               <td>{{ index }}</td>
               <td><textarea v-model="item.message" :ref="'ta'+index"></textarea></td>
           </tr>

focus метод:

methods:{
  focus(key){
    this.$refs[key][0].focus()
   }
}

установите флажок demo

Answer 2

Вы пытались добавить динамическое значение для ref в каждой строке?

Затем вы можете реагировать на события щелчка и выбирать соответствующую текстовую область на основе этого атрибута.

Что-то вроде:

<template>
    <div>
       <table>
           <tr v-for="(item, index) in items" v-on:click="focusTextArea(index)">
               <td>{{ index }}</td>
               <td>
                 <textarea ref="textArea{{index}}" v-model="item.message"></textarea>
               </td>
           </tr>
       </table>
    </div>
</template>
<script>
    export default {
        data: {
            items: [
               { message: 'Foo' },
               { message: 'Bar' }
            ]
        },
        methods: {
          focusTextArea: (textAreaIndex) => {
            this.$refs[`textArea{textAreaIndex}`].$el.focus();
          }
        }
    };
</script>