vue2在公众号上用ref拿不到元素高度？

Question

公众号用的vue2写的，我在加载完页面时写了以下的代码：

 mounted() {
    this.start()
    console.log("高度")
    console.log(this.$refs)
    console.log(this.$refs.imgHeight)
  },

this.$refs下面有imgHeight,但是this.$refs.imgHeight是underfined这是为什么？？用的“微信开发者工具”看的。

Answer 1

ref使用.拿不到值可以使用[]试一下: this.$refs['imgHeight']

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

检查一下渲染时机，很可能是异步数据渲染的 imgHeight 元素，所以在 mounted 时输出并不会有这个元素。

需要等到你的数据请求完毕，页面渲染完成之后再尝试使用 this.$refs 获取元素。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

首先，建议贴下页面结构代码或完整案例【不涉及核心代码的前提下】
其次，可以使用排除法，将$ref内的元素注释后，单独赋值minHeight属性，单独查看，排除其他元素的影响。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

this.$nextTick(()=>{
    //执行你的代码...
})

Answer 5

最好贴出相关代码，但看着输出有很多可能，另外最大可能就是 imgList 是通过接口返回之后在渲染的，而此时组件的 mounted 先执行了，自然获取不到值。

至于打印出来能看到有值是因为它是 js 里面的引用类型，即便是接口异步赋值的，也可以关联到原始对象上，即你早前的打印属于可见但不可用。

可以在请求数据之后，在通过 nextTick 的方式来访问就可以了。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。