vue中动态渲染数据时使用$refs无效的解决

更新时间：2023年01月23日 12:15:57 作者：TO_WebNow

这篇文章主要介绍了vue中动态渲染数据时使用$refs无效的解决方案，具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue动态渲染数据时使用$refs获取dom无法获取问题

场景：在循环的列表上绑定了 ref, 想当数据动态渲染完了，然后获取列表，接着就是获取不到了

解决办法

在请求数据了以后,方法内后, 加上

this.$nextTick(() => {
// 在这里获取 this.$refs.dom
})

列子

messList().then(res => {
     console.log(res)
     Toast.success('获取成功')
     this.contentlist = [...res.data.data]
     this.$nextTick(() => {
         this.sideWrap()
     })
 })

vue中$refs取值是undefined

ref 被用来给元素或子组件注册引用信息。

引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，如果用在子组件上，引用就指向组件实例。

如果使用 v-if dom 就不会被渲染 ref 会一直获取的是undifined，这时可以利用下面方式获取数据

<div :class="currentStep==0?'el-form-item-show':'el-form-item-hidden'">

.el-form-item-hidden {display: none;}
.el-form-item-show {display: block;}

或者使用setTimeout得到数据

setTimeout(() => {

}, 0)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

SSM VUE Axios详解
Axios是在前端开发中常用的一个发送 HTTP 请求的库，用过的都知道,篇文章主要给大家介绍了关于vue的相关资料,需要的朋友可以参考下
2021-10-10
vant/vue手机端长按事件以及禁止长按弹出菜单实现方法详解
这篇文章主要介绍了vant/vue手机端长按事件以及禁止长按弹出菜单实现方法详解,需要的朋友可以参考下
2022-12-12
vue组件实现可搜索下拉框扩展
这篇文章主要为大家详细介绍了vue组件实现可搜索下拉框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-06-06
vue双向数据绑定原理分析、vue2和vue3原理的不同点
这篇文章主要介绍了vue双向数据绑定原理分析、vue2和vue3原理的不同点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
详解Vue中AXIOS的封装
这篇文章主要为大家介绍了Vue中AXIOS的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
Vue项目数据动态过滤实践及实现思路
这篇文章主要介绍了Vue项目数据动态过滤实践,，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
Nuxt.js SSR与权限验证的实现
这篇文章主要介绍了Nuxt.js SSR与权限验证的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
Antd form表单的使用、设值、取值、清空值方式
这篇文章主要介绍了Antd form表单的使用、设值、取值、清空值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
这篇文章主要介绍了VUE解决微信签名及SPA微信invalid signature问题(完美处理)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
简化vuex的状态管理方案的方法
在 vuejs 相关项目开发过程中，我们常常会使用 vuex 作为状态管理工具, 整个组件的状态做为单向数据流的模式管理，这篇文章主要介绍了简化vuex的状态管理方案的方法，感兴趣的小伙伴们可以参考一下
2018-06-06