如何在vue.js的嵌套v-for循环中访问元素的ref索引？

2024-05-08 • 问答

是否可以通过使用元素的refs索引访问嵌套v-for循环中的元素？我的意思是，我试图将文本框的焦点放在嵌套的v-for循环中，该循环用于通过其refs索引进行访问。它适用于单个v-for循环，但不适用于嵌套。

有关更多详细信息，这是我的循环结构：

这有效

<div v-for="(comItem,index) in commentItems" :key="comItem.commentId">
 <textarea ref="addRep" ></textarea>
</div>
  this.$nextTick(() => {
                        this.$refs.addRep[index].focus()
                    });

这不起作用

<div v-for="(cont,i) in contentItems" :key="cont.contentId">
    ...
     <div v-for="(comItem,index) in commentItems" :key="comItem.commentId">
     <textarea ref="addRep" ></textarea>
     </div>

</div>
  this.$nextTick(() => {
                        this.$refs.addRep[index].focus()
                    });
Or
 this.$nextTick(() => {
                        this.$refs.addRep[i].focus()
                    });

具有嵌套的html v-for循环结构。焦点将随处跳动。对于遇到这种情况的任何人。如果您知道解决方案，请协助我。谢谢。

尝试在addRep中计算适当的索引有些棘手。您需要同时使用i和index的值，然后在相关数组中向上计数以得出适当的索引。

更简单的方法是使用动态ref名称。我们仍然需要i和index来找到相关元素，但是不需要计算。

这里的核心技巧是将ref设置为:ref="`addRep${i}`"，或者如果您愿意的话，将其设置为:ref="'addRep' + i"。因此，您将获得多个命名的引用addRep0，addRep1等，每个都有自己的元素数组。 i的值告诉您引用名称，index的值告诉您该数组中的索引。

这是一个例子：

new Vue({
  el: '#app',data () {
    return {
      contentItems: [
        {
          contentId: 1,comments: [
            {
              commentId: 1,text: 'A'
            },{
              commentId: 2,text: 'B'
            },{
              commentId: 3,text: 'C'
            }
          ]
        },{
          contentId: 2,text: 'D'
            }
          ]
        },{
          contentId: 3,text: 'E'
            },text: 'F'
            }
          ]
        }
      ]
    }
  },methods: {
    onButtonClick (i,index) {
      this.$refs[`addRep${i}`][index].focus()
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <div v-for="(cont,i) in contentItems" :key="cont.contentId">
    <h4>{{ cont.contentId }}</h4>
    <div v-for="(comItem,index) in cont.comments" :key="comItem.commentId">
      <textarea :ref="`addRep${i}`" v-model="comItem.text"></textarea>
      <button @click="onButtonClick(i,index)">Focus</button>
    </div>
  </div>
</div>

如何在vue.js的嵌套v-for循环中访问元素的ref索引？

qq44461443 回答：如何在vue.js的嵌套v-for循环中访问元素的ref索引？

大家都在问