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();

这仅适用于具有唯一参考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>

如何在Vuejs 2的v-for内部呈现文本区域上设置焦点？

2 个答案: