vue3.0 v-for中ref获取不到子组件的实例

已于 2022-03-13 11:39:35 修改
阅读量1.7k 收藏
点赞数 3
分类专栏： vue 文章标签： vue
于 2022-03-13 11:38:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z_kenshou/article/details/123456501
版权

先说解决问题的方法
在这里插入图片描述
这是查找了好多地方， 最后在vue3.0文档上找到的， 还是要多看文档啊！

问题描述
我有一个时间组件在页面上循环展示的， 绑定ref，自己在本地跑的时候都是没有问题的一上生产问题就来了。
改造前的代码
页面
在这里插入图片描述
这个时候在log里面 打印的是undefined 如果获取到的话应该是个proxy对象

改造后的代码
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
取值 是 deliveryBusinessTimesRef.value[index] 这个log之后就是proxy
这个时候发正式环境就没有问题了

网猴
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue3获取vuex中的对象时为proxy对象，如何获取值
weixin_43322018的博客
06-15 1万+
在使用vuex的时候发现获取state的string number类型的变量时，是可以直接通过store.state.value 取到值的，但是在取对象的时候，控制台打印出来的是Proxy 对象，Proxy对象里边的[[Target]]才是真实的对象。 //第一种获取target值的方式，通过vue中的响应式对象可使用toRaw()方法获取原始对象 import { toRaw } from '@vue/reactivity' var list = toRaw(store.state.menuList)
卸载vue2.0并升级vue_cli3.0的实例讲解
10-15
在本文中，我们将探讨如何从 Vue 2.0 升级到 Vue 3.0，以及两者之间的主要差异。 首先，如果你正在使用的项目基于 Vue 2.0，但想要迁移到 Vue 3.0，有两种方法：升级现有项目或完全卸载 Vue 2.0 并重新安装 Vue 3.0...
Vue父组件使用v-for循环子组件ref使用问题
YKX_CSDN的博客
12-01 958
基于 形式编程方式，父组件中循环渲染子组件成功，但是使用ref获取子组件实例时，获取失败。
vue ref在v-for中获取不到dom
water_Popcorn的博客
03-31 1018
问题描述： v-for中使用ref： <div v-for="(item,index)in list":key="index"ref="childName"> {{item.childName}} </div> js中打印： getStyle(){console.log(this.$refs);} 打印出来的是空数据。 解决方法： 在nextTi...
Vue 3中的v-for指令使用详解
最新发布
李长渊的博客
05-28 1944
Vue 3中的v-for指令使用详解
Vue3的v-for后无法获取ref的dom节点问题
weixin_53205628的博客
04-13 1803
Vue3的v-for后无法获取ref的dom节点问题
vue3父组件接收子组件方法时，拿不到子组件方法可能是v-for实现绑定ref数组
weixin_47483275的博客
11-10 974
在开发的时候发现在循环里面父组件里面的方法通过ref不能直接拿到子组件的方法。发现如果是v-for用于元素或组件的时候，引用信息将是包含DOM节点或组件实例的数组。我所参考的链接：https://www.jianshu.com/p/3dcb8b0eeb3b。
【vue3报错】解决vue3 ref 获取不到子组件
weixin_52418790的博客
09-13 4131
在父组件内调用子组件内的事件从而改变子组件的某些状态，父子组件使用``语法糖，父组件通过给子组件定义ref访问其内部事件。这看起来完全没毛病，理想很丰满，现实很骨感，写完就是访问不到，还报错，离离原上谱，这究竟是为啥
Vue3 + TS项目，获取的子组件实例可能为 null 的问题
qq_40147756的博客
07-01 2410
在 vue3 + ts 项目中，父组件获取子组件实例可能为 null 的问题，3种解决方式。
Vue3中setup在script标签中ref获取不到子组件属性和方法
qq_54334713的博客
03-11 1931
vue3中使用ref获取不到子组件属性和方法
vue3通过ref使用子组件内的属性或者方法无法获取
qq_35443423的博客
07-02 2734
最近在项目vue2迁移vue3的过程中，碰到当页面内定义的ref去调用子组件的内的方法或者属性时报错，通过输出页面内定义的ref发现仅有一共__v_skip：true经过百度和官网查询发现使用语法糖后,组件是默认关闭的，无法通过ref获取到 需要在子组件内使用defineExpose(）将需要的属性或者方法暴露出去...
vue 3.0 基础知识点
01-14
- **挂载阶段**: `beforeMount` 和 `mounted` 钩子，在组件实例挂载到 DOM 前后执行。 - **更新阶段**: `beforeUpdate` 和 `updated` 钩子，在组件实例更新前后执行。 - **销毁阶段**: `beforeUnmount` 和 `...
vue中使用refs定位dom出现undefined的解决方法
11-29
但这并不意味着所有的DOM操作都可以在这个阶段进行，尤其是当涉及到`v-if`、`v-for`和`v-show`这样的指令时。这些指令会根据条件或数据变化延迟DOM的渲染。因此，如果`ref`指向的元素受到这些指令的影响，那么在`...
vue3 demo.zip
12-05
在"vue3 demo.zip"中，我们有以下几个主要的子文件： 1. "vue-bilibili-master"：这是一个模仿哔哩哔哩（B站）界面的Vue3应用实例。它展示了如何在Vue3中构建一个复杂的用户界面，包括组件化、状态管理、路由处理等...
【JavaScript源代码】vue3.0+echarts实现立体柱图.docx
12-29
在本文中，我们将深入探讨如何在Vue 3.0项目中使用ECharts库来创建一个立体柱状图。ECharts是一款由百度开发的基于JavaScript的数据可视化库，它提供了丰富的图表类型，易于使用且功能强大。在Vue 3.0中集成ECharts...
vue3通过ref调用子组件方法，第一次点击报找不到该方法，ref和v-if冲突
小夏同学呀
01-19 1213
vue3通过ref调用子组件方法，第一次点击报找不到该方法，ref和v-if冲突
Vue v-for渲染页面，获取不到DOM元素解析
weixin_34064653的博客
06-22 3288
v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接，在开发上面节省了很多时间。 近期在开发中发现了在某些特定情况下，出现了获取不到渲染出来的DOM元素的情况，原因身为小白的我暂时还没搞清楚（忘大佬指出），但是却得出来初步的解决方案。 HTML 代码 <div id="app"> <li v-for="ite...
vue3 在popup中父组件无法通过ref获取子组件defineExpose的属性
weixin_45495844的博客
01-10 1046
父组件无法通过ref获取子组件defineExpose的属性.:声明和暴露都写全了,在vue3 setup代码块中，子组件有手动defineExpose暴露，并且该页面其他的子组件可以获取到ref值，就这个写在popup中的组件拿不到。:在popup添加lazyRender=“false” 的属性，让弹窗未点开时就把子组件加载好，这样ref才有值。
Vue3获取ref的方法
Dysons的专栏
03-21 1623
vue3在v-for里面获取ref的方法
vue3.0怎么拿到组件实例
04-25
你可以使用`ref`函数或`$refs`属性来获取组件实例。使用`ref`函数来在组件上创建一个引用，然后在生命周期钩子或方法中访问该引用，就可以获取到组件实例了。例如，下面的代码就可以获取一个名为`myComponent`的组件的实例： ```javascript <template> <my-component ref="myComponent"></my-component> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent }, mounted() { const myComponentInstance = this.$refs.myComponent; // now you have the component instance } } </script> ``` 使用`ref`函数时需要注意，如果组件是通过`v-for`指令动态生成的，那么`ref`函数返回的实例将是一个数组，需要使用数组索引来访问实例。同时，`ref`函数只能用在组件上，不能用在普通的 DOM 元素上。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值