this.$refs.gridWrap undefined

Question

vue获取dom元素时，打印this.$refs可以看到想要获取的元素gridWrap，但是打印this.$refs.gridWrap确实undefined

代码：

<div ref="gridWrap">

let gridHeight=this.$refs.gridWrap;
            console.log(this.$refs); //正常
            console.log(this.$refs.gridWrap); //undefined

Answer 1

this.nextTick(() => { this.$refs.xxx })

Answer 2

之前答案有问题，参考楼下的nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

Answer 3

vue更新dom是异步的，并不是数据变化导致的视图更新会立刻同步，所以放在nextTick的回调函数中能获取某个更新周期后的dom数据