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

目录
  • vue动态渲染数据时使用$refs获取dom无法获取问题
    • 解决办法
  • vue中$refs取值是undefined
  • 总结

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)

总结

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

赞 (0)

相关推荐

  • 解决vue组件渲染没更新数据问题

    目录 问题: 现象: 原因 解决步骤 问题: 使用前端日期控件时 - 数据联动时数据绑定无效问题 现象: 选择A日期,想动态改变B日期数据,只有第一次选择时会动态改变B日期数据,第二次选择A日期时,B日期数据虽已改变,但是页面数据未改变 例如我要点击留样日期,销毁日期就得默认设置为留样日期之后的三个月,只有第一次点击,效果能正常显示,但是第二次点击,销毁日期就不会更新了… 原因 前端组件没有重新加载,一直保持旧数据 解决步骤 使用标志位让组件每次更改刷新一次 一.前端组件绑定点击事件 二.新增一

  • Vue组件渲染与更新实现过程浅析

    目录 1. 模板编译 2. 组件渲染和更新 1. 模板编译 Vue的模板编译就是将模板字符串转换为渲染函数的过程.具体来说,当组件的生命周期执行到created和beforeMounted之间时,Vue会将模板(template)编译成渲染函数(render),render函数是一个纯JavaScript函数,由with语句构成,它接收一个Vue组件实例作为参数.当render函数执行时会调用h函数,生成虚拟DOM节点(vnode). 下面给出了常见的template模板以及模板编译后的结果:

  • Vue的异步渲染axios问题

    目录 Vue异步渲染axios Vue axios发起异步请求 真实项目中的使用 总结 Vue异步渲染axios 首先我们要知道axios不是vue里面的. axios是一个基于Promise的,发送http请求的一个工具库,并不是vue中的第三方插件,使用时不能通过“Vue.use()”安装插件,需要在原型上进行绑定. axios异步跟jquery中ajax其实是一样的,功能相同,不过获取到数据以后渲染的难易程度不同让axios更加突出,jquery需要不停的操作dom元素进行渲染,而axio

  • Vue跨端渲染实现多端无缝衔接

    Vue 内部的组件是以虚拟 dom 形式存在的.下面的代码就是一个很常见的虚拟 Dom,用对象的方式去描述一个项目.相比 dom 标签相比,这种形式可以让整个 Vue 项目脱离浏览器的限制,更方便地实现 Vuejs 的跨端 { tag: 'div', props: { id: 'app' }, chidren: [ { tag: Container, props: { className: 'el-container' }, chidren: [ 'Hello Little Gay!!!' ]

  • 浅谈vue单一组件下动态修改数据时的全部重渲染

    今天在学习vue的过程中,发现一个有趣的现象. 在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定.可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化 这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如.是不是只要有一个节点变了,node都重新进行了加载??? 我想这其中的缘由必定

  • Vue中动态引入图片要是require的原因解析

    Vue中动态引入图片要是require的原因解析

    目录 1.什么是静态资源 2. 为什么动态添加的src会被当做的静态的资源? 3. 没有进行编译,是指的是什么没有被编译? 4. 加上require为什么能正确的引入资源,是因为加上require就能编译了? 4.1 require是什么: 是一个node方法,用于引入模块,JSON或本地文件 4.2 调用require方法引入一张图片之后发生了什么: 5. 问题3中,静态的引入一张图片,没有使用require,为什么返回的依然是编译过后的文件地址? 6. 按照问题6中所说,那么动态添加src的

  • Vue中v-for的数据分组实例

    使用Vue.js可以很方便的实现数据的绑定和更新,有时需要对一个一维数组进行分组以方便显示,循环可以直接使用v-for,那分组呢?这里需要用到vue的computed特性,将数据动态计算分组. 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

  • Vue中关闭弹窗组件时销毁并隐藏操作

    背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行 原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行 <select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup='showExperienceGroup' @closeCover="handleExper

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

  • 解决vue中修改了数据但视图无法更新的情况

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() shift() unshift() splice() sort() reverse() vue2.0还增加个

  • vue+iview动态渲染表格详解

    vue+iview动态渲染表格详解

    本文实例为大家分享了vue+iview 动态渲染表格(iview插件table),供大家参考,具体内容如下 效果图 (表格头部和表格主体都是动态渲染) 重要代码 <template> <Table ref="selection" v-for="(item) in entities" :columns="item.columns" :data="item.data" :border="false&qu

  • vue中动态参数与计算属性的使用方法

    vue中动态参数与计算属性的使用方法

    一,动态参数 从 2.6.0 开始,可以用方括号括起来的 JavaScript 表达式作为一个指令的参数: <a v-bind:[attributeName]="url"> - 这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用.例如,如果你的 Vue 实例有一个 data property attributeName,其值为 "href",那么这个绑定将等价于 v-bind:hr

  • Vue中如何定义数据示例详解

    前言 在开发的过程中,定义变量是一件非常高频且十分基础的事情,如何合理的根据变量的使用场景和作用域范围进行定义变量,是一件很小缺很容易犯错的事情 Vue2已经流行使用了这么多年,多数开发者在开发过程中喜爱在data选项中梭哈定义很多变量,这样做非常不利于代码的阅读性.维护性和性能,想要很好的使用变量,需要结合Vue和JS的特性 在Vue中,按照是否需要双向数据绑定,可以将变量分为两种: 一种是需要被Vue的数据劫持,将data的变化实时响应到view上 只要data只能够的msg变化, temp

  • 详解如何在Vue中动态添加类名

    目录 静态和动态类 有条件的类名 使用数组语法 使用对象语法 与自定义组件一起使用 快速生成类名 使用计算属性来简化类 能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class="classname"一样简单.无论classname的计算结果是什么,都将是添加到组件中的类名. 当然,对于Vue中的动态类,我们可以做的还有很多.在本文中,我们将讨论很多内容:

随机推荐