首页 > 其他分享 >关于在 computed 使用 ref 获取 dom 结点为 undefined的问题

关于在 computed 使用 ref 获取 dom 结点为 undefined的问题

时间:2023-05-30 18:35:43浏览次数:38  
标签:nextTick console log dom isMount ref computed

原因:

  因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们,它们还不存在

  computed 里面无法获取到 ref

解决方法:

方法一:

data: {
    isMount: false,
},
mounted() {
    this.isMount = true
},
computed: {
    if(this.isMount) {
        console.log(this.$ref.“节点名”)
    }
}

方法二:

可以使用:$nextTick

computed: {
    this.$nextTick(() => {
        console.log(this.$ref.“节点名”) 
  }) 
}

 

标签:nextTick,console,log,dom,isMount,ref,computed
From: https://www.cnblogs.com/panwudi/p/17444055.html

相关文章

  • The Importance of Particle Size Analysis in Preformulation Studies
    Thesizeoftheparticlesiscalledparticlesize.TheparticlesizeoftheAPIiscloselyrelatedtothehomogeneityofthepreparationprocessintermsofmixing,theaccuracyofdosage,andcompressibility,andithasanimpactonthesolubility,durat......
  • C#引用类型带ref关键字的用处
    1.在C#中有两个大的数据类型,值类型和引用类型。1)任何的结构体(例如:structInt32...)或者是枚举都是值类型。2)能被称作"类"的,则为引用类型,比如你用如下关键字(class、interface、delegate、record),或者是使用C#内置的引用类型:dynamic、object、string。引用类型和值类型。引用类......
  • linphone-LinphonePreferences.java文件分析
    说明这个文件比较长,主要是对于linphone的配置文件等设置。对于前面文章中文件的调用。其中大多数是对底层的调用设置。功能设置用户信息设置端口号设置显示名称设置密码设置代理设置编码设置编码速率设置DMTF等设置加密解密设置是否使用ipv6设置tunnel设置相机等UML类图LinphonePre......
  • sockjs.js:1603 GET http://localhost/sockjs-node/info?t=1685340190468 net::ER
    vue项目报错不影响运行,但控制台看到这报错,属实不舒服 解决方法:进入\node_modules\sockjs-client\dist\sockjs.js注释1603行   刷新页面,没报错了 ......
  • 什么是 JavaScript 里的循环引用(circular references)
    JavaScript的循环引用(circularreferences)是指在对象之间存在相互引用的情况,形成一个闭环,导致对象无法被完全释放和垃圾回收。循环引用发生在当一个对象的属性或成员引用另一个对象,并且这个被引用的对象又直接或间接地引用回原始对象,从而形成一个循环。当存在循环引用时,JavaScrip......
  • echarts爆错invalid dom
    错误截图 错误原因:将初始化echarts的方法放在了created中,解决:将其放在mounted中 ......
  • Firefox 插件:网页剪贴簿(继承自 Firefox 旧版插件 ScrapBook X)
    Firefox插件:网页剪贴簿(继承自Firefox旧版插件ScrapBookX)获取网页至本地或后端服务器供检索、组织、加注、编辑。https://addons.mozilla.org/zh-CN/firefox/addon/webscrapbook/ 网页剪贴簿(WebScrapBook)可以忠实撷取网页内容,支援多种储存格式与客制化设定,还可以对撷......
  • Planar Odometry from a Radial Laser Scanner. A Range Flow-based Approach(1)论文解
    激光光流里程计的基本理解:(1)类比图像光流,假设光强度不变,图像是每个像素点,像素包含灰度值;激光光流,假设障碍物不动,光流是激光范围内的激光点,每个激光点包含距离和角度信息(2)图像信息求导,得到光强度;激光光流信息求导,得到速度(距离的速度,角度的速度),并可以用分解到笛卡尔坐标系下的速度......
  • RefsUtil 是 Windows 下一款用于管理 REFS 文件系统的实用工具,它提供了丰富的功能和命
    RefsUtil是Windows下一款用于管理REFS文件系统的实用工具,它提供了丰富的功能和命令行界面,可用于创建、修改、检查和修复REFS分区,以及导出和导入数据等操作。以下是一些使用RefsUtil工具的示例:创建REFS分区要创建一个新的REFS分区,可以使用以下命令:CopyCoderef......
  • 随机数Random
    packagecom.karl;importjava.util.Random;publicclassRandomDemo{publicstaticvoidmain(String[]args){//创建一个Random对象,用于生成随机数Randomr=newRandom();//调用Random提供的功能:nextInt得到随机数for(inti......