求解：$refs打印v-for循环出的数据为undefined。

Question

我的目的是搜索名字出来给它这个列表加标识加图标，但是获取dom这部就失败了。

 <div class="home">
     <input type="text" v-model="names" />
     <input type="button" @click="search" value="检索" />
     <div class="list-box">
         <div
         ref="list"
         v-for="node of treeList"
         :style="{
         paddingLeft: node.level * 10 + 'px',
         }"
         :key="node.id"
         >
            {{ node.name }}
         </div>
     </div>
 </div>

这是我查了为什么会undefined之后试了的方法以及相关代码：

function treeToList(tree) {
     const result = tree.map((i) => ((i.level = 0), i));
         for (let i = 0; i < result.length; i++) {
             if (!result[i].child) continue;
             result[i].child.forEach((x) => (x.level = result[i].level + 1));
             result.splice(i + 1, 0, ...result[i].child);
         }
     return result;
}

mounted(){
     this.$nextTick(() => {
        this.txt = this.$refs.list.innerText
     });
 },
 computed: {
     treeList() {
        return treeToList(this.list)
     },
 },
 methods: {
     async search() {
         await this.$nextTick();
         console.log(this.$refs.list.innerText)
     },
 },
 

Answer 1

v-for 里面 refs 是个数组 你 log 一下就知道了

this.$refs.list  // 数组
this.$refs.list.innerText  ==>  [].innerText = undefined

补个源码图

Answer 2

this.$refs.list是一个数组类型，this.$refs.list[index].innerText，你应该取某一项然后获取innerText