使用v-if后获取this.$refs.xxx为undefined

最新推荐文章于 2023-07-03 21:25:34 发布
最新推荐文章于 2023-07-03 21:25:34 发布
阅读量1k 收藏 1
点赞数
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WeiflR10/article/details/122302116
版权

原因就是在获取的时候，dom元素并没有加载完成。

解决方式：使用$nextTick

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

this.$nextTick(()=>{
   console.log(this.$refs.aaa)
})

WeiflR10
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
【Vue3】refs的使用和v-if冲突，undefined “TypeError: Cannot read property ‘$refs‘
清凌的博客
06-02 1万+
使el-form中的el-input自动获取焦点 https://www.cnblogs.com/rockyjs/p/13974649.html https://segmentfault.com/q/1010000021805173 问题： v-if this.$refs无法获取ref的值 出现了报错： Error in nextTick: "TypeError: Cannot read property '$refs' of undefined" 靠谱的解决方法： 1.不要使用ref的方法，而是使用.
vue调用ref，子组件undefined问题，原因是v-if
qq_39117154的博客
08-16 3235
vue，ref，v-if
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue的 this.$refs 打印为undefined解决办法
浮游的博客
07-15 1万+
当前已收集的Linux安装包版本： 段落引用Centos_x86_64（5、6、7、8）
v-if报undefined
青春不打烊的博客
06-23 3015
vue项目使用v-if的判断值取不到报undefined错误。 代码演示： 定义一个变量，值在sessionStorage不存在； data() { return { bcid:sessionStorage.getItem("bcid"), }; }, 然后在标签中使用if； <div v-if="bcid!='12345678'" :key="bcid"> 该工坊未发布服务! </div> 这样就会报出undef
【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法（涵盖uniapp/H5/微信小程序）
热门推荐
徐海东的博客
07-13 2万+
目录问题：获取this.$refs为空对象或者为undefined原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）解决方法：ref在非H5端使用在自定义的组件原因二：使用了版本过低的调试基础库原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取
自定义v-model事件
Pgy121的博客
09-08 3142
父组件 <template> <div class="home"> <p>{{name}}</p> <v-model v-model="name"></v-model> </div> </template> <script> import vModel from '@/components/HelloWorld' export default { name: 'home',
因为v-if导致ref失效设置this.$nextTick()也无效。
qq_42661587的博客
07-28 1994
v-if导致ref失效设置this.$nextTick()也无效。将v-if改为v-show
this.$toast() 了解一下？
12-03
上面这种类型的浮层提示有一个很大的特点，就是使用频率特别高，几乎每个页面都会用到它，于是乎我们就要在每个页面中去引入该组件，并且在每个页面都得通过一个变量来控制它的显隐，这显然不是我们想要的:person_...
关于在Vue中使用ref（此.$refs未定义 undefind）
PineappleL的博客
04-28 2455
但是页面还没有挂载上去，没有e l 属 性 ， t h i s . el 属性，this.el属性，this.refs无法调用dom。我一开始设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的，调用的对象是本来就存在的，还是需要数据渲染之后才会出现的，同理，在mounted（）里面调用看看。后来才发现，this.$refs.name是一个数组，无法通过 .style 获取样式，因为$refs不是响应式的，只在组件渲染完成后才会生效，在初始渲染的时候是不存在的。
Vuejs this.$refs 调用报undefined的问题处理
m0_47139596的博客
02-14 2227
Vue 2.6.10版本。
v-if下的元素 $refs失效
m0_61004873的博客
04-21 1819
1.v-if下的dom元素，用this.$ref.xxx方法会获取不到 解决方法 v-show代替v-if 因为v-if是通过控制dom节点的显示或隐藏来实现的，所以不满足情况的时候dom节点不会生成，而$refs是来操作dom的，所以这时候就是undefind.而v-show是通过控制css的dispaly属性来实现元素的显示或者隐藏。此时的dom是存在的，已经生成过了。 ...
vue之el-col栅格组件使用v-for循环添加&& v-if避免初始化报错”xxx“ undefined
初心不改
08-25 5133
需求&问题 做一个展示页面，有四张卡片显示在同一行，卡片可点击跳转到详情页。一开始是用el-col写了四个，考虑到后期可能更多卡片，所以准备用v-for循环遍历list对象数组来添加卡片。 顺带提一句，使用el-col是为了定义屏幕自适应，不同屏幕尺寸下一行显示几张卡片。 代码 <el-row :gutter="40" style="margin-top: 30px" > <!--分栏间隔--> <el-col :xs="12" :sm="12" :md="12
【Vue】this.$refs.xxx 报错undefined解决办法
最新发布
慕白Lee的博客
07-03 5868
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。适用于特定场景, 然后第一次渲染不执行,需要注意的是定义的变量需要在子组件下, 不然也是获取不到的。，如果你使用v-if 、v-for渲染页面的话，那么在刚开始页面没没渲染之前你是拿不到。的时候提示undefined, 一开始以为方式失灵了,后来是发现。的，所以要等到页面渲染之后拿才可以。调用子组件里的函数，页面初始化的时候调用。
vue3 父组件使用ref取值子组件的值为undefined
weixin_59556897的博客
11-02 5032
ref所在的标签不要用v-if，使用v-show就好了。并且ref的父级标签也不要用v-if。能用v-show就用v-show。否则就会出现打印$refs时，值为undefined。将父组件 的v-if去掉 就可以取到正常的值。但是控制台打印取值为undefined。起因：父组件取值到子组件定义的值。
v-if报错：This ‘v-if‘ should be moved to the wrapper element
qq_56607795的博客
08-18 5162
v-if报错：This 'v-if' should be moved to the wrapper element，附带问题原因和解决办法，以及v-show的问题。
v-if导致用ref取不到元素的解决办法
weixin_45905700的博客
05-09 7151
今天在写一个功能的时候需要给一个用ref取到并且用this.$refs("")获取到的元素并且用this.$refs("XXX")[0].style渲染出来的div加一个提示框，当时第一反应是用vue的Tooltip 文字提示组件，比较方便，就用el-tooltip在外面包了一层。 错误写法： 需要提示的内容是需要在页面进行某一操作后才可以得到的，所以有可能是undefined，就自然而然的加入了v-if，但是只要这个v-if加上就开始报错，打印出来发现是this.$refs("")获取到的值u..
vue v-if和this.$refs 怎么用nextTick解决
06-06
当使用 `v-if` 来控制元素的显示和隐藏时，DOM 的创建和更新是异步完成的，此时如果直接在 `v-if` 后面使用 `this.$refs` 访问元素，可能会出现元素还未创建或更新完成的情况，导致无法获取到正确的元素。因此，需要使用 `this.$nextTick` 来确保在 DOM 更新后再去访问元素。 示例代码如下： ```html <template> <div> <button @click="show = !show">Toggle</button> <div v-if="show" ref="myDiv">Hello World</div> </div> </template> <script> export default { data() { return { show: false }; }, methods: { handleClick() { this.$nextTick(() => { const myDiv = this.$refs.myDiv; // do something with myDiv }); } } }; </script> ``` 在上面的代码中，当点击 `Toggle` 按钮切换 `show` 的值时，`v-if` 会异步创建或销毁 `myDiv` 元素。在 `handleClick` 方法中，我们使用 `this.$nextTick` 来确保在 DOM 更新后再去访问 `myDiv` 元素。这样就可以避免出现元素还未创建或更新完成的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值