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

写项目需要用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。我们共同学习。



本站全部博文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

本文永久地址:https://blog.zixutech.cn/archives/629
本文作者:紫旭
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇