[避坑]Vue.js $refs能获取到对象但是子对象获取不到(undefined)的问题

共计 556 个字符，预计需要花费 2 分钟才能阅读完成。

写项目需要用 ref 获取 dom 对象来获取元素的属性，Vue 的 ref 属性非常好用，但是今天碰到了问题。

<div v-for="(item, index) in items" :key="index">
    <div ref="content"> </div>
</div>

定义了以上循环，循环内有个 div，写上了 ref 属性。

此时我在 methods 里写了接口来获取数据，数据到了之后，这个 div 就有宽度和高度了，我的目的是想取到里面这个 div 的高度和宽度

在 created 里写了如下方法

that.getItemList()
that.$nextTick(() => {that.divHeight = that.$refs.content[0].offsetHeight
}, false)

此时报错，提示 .content 这个对象不存在。

我打印 that.$refs 发现 content 实际是有的，但是取不到。

在翻阅文档和资料后，找到解决办法：

在更新模板渲染的方法里才能取到，也就是说，在 that.getItemList() 这个方法里，有一段 that.items = resultData。在这赋值之后紧接着获取 refs，就可以获取到了。

这也算是个知识点了，写给自己备忘。

如果你跟我有相同的问题，并且看完文章还不明白解决不了，加我 QQ10066267。我们共同学习。