vue在el-dialog中this.$refs值为undefined问题

vue中元素上加上ref属性取值,相当于取整个元素的,和$("#id")类似。但是要用此属性需要了解加载的时间,从官网上可以看到

关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。

一般用法就是在mounted方法中加入this.$nextTick

mounted() {
  this.$nextTick(() => { // 页面渲染完成后的回调
    this.ul_Height=this.$refs.ulheight.offsetHeight
  })
}
//this.$refs.ulheight==undefined

但是如果$refs在el-dialog中用上述方法还是会undefined,如下:


    
    ……

解决的方法就是在el-dialog中加入回调函数@open,然后在回调函数方法中用this.$nextTick。


    
    ……
//js部分: methods:{ getUlHeight(){ this.$nextTick(()=>{ this.ul_Height=this.$refs.ulheight.offsetHeight }) } }

你可能感兴趣的:(vue在el-dialog中this.$refs值为undefined问题)