在循环的组件上获取不到节点信息问题解决

最新推荐文章于 2023-05-26 14:42:50 发布
最新推荐文章于 2023-05-26 14:42:50 发布
阅读量364 收藏
点赞数
分类专栏： js 微信小程序 获取元素信息 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55648290/article/details/125737258
版权

 

 

第一种方法是使用this.$refs[][0]

this.$refs[type][0].setModels(data)

第二种是使用this.$children

this.$children[0].$refs[type][0].setModels(data)

尤小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于VUE中v-for循环的dom使用ref获取不到问题
weixin_34217773的博客
05-14 1万+
背景： 初学vue做练习项目的时候，基于vue2.0版本使用refs属性获取v-for循环的dom时出现获取不到dom的情况，尝试采用原生的方法出现同样的情况。查了很多资料没有找到对应的详细说明，现将我发现的一些问题分享给大家。 html部分 <div class="food-group" v-for="(item,index) in goods" :key="index" ref="g...
解决vue页面渲染但dom没渲染的操作
10-15
这通常是由于Vue的响应式系统未能及时检测到数据变化，或者是在Vue生命周期的不恰当时间进行了DOM操作。以下是一些解决Vue页面渲染但DOM未渲染问题的方法： 1. **使用`this.$nextTick()`**： 在数据更新后，Vue会...
vue 动态组件名_vue动态加载组件mounted无法获取dom的解决思路
weixin_39748858的博客
11-20 1016
有时我们在mouted方法中想通过id读取到一个dom元素，虽然官方并不推荐这种方法来操作dom。但难免有碰到这种情况，如下面一个dom元素试图在mouted中获取 试图在nextick中获取 结果还是为空究其原因，还是该dom元素未在文档中生成。所以用document.getelementId 是无法获取到该元素的解决方法在vue文档中 关于的自定义指示器中有这么一段话通过自定义指示器的ins...
记录uniapp上获取标签的高度，也可获取宽，位置
qq_52883064的博客
05-26 1201
【代码】记录uniapp上获取标签的高度，也可获取宽，位置。
uniapp createSelectorQuery()方法获取不到节点问题
云雨之石的博客
03-10 2697
uniapp createSelectorQuery()方法获取不到节点问题
如何获取 $(this) 选择器的孩子？
kalman2019的博客
01-07 669
我有一个类似于这样的布局：并希望使用 jQuery 选择器在点击时选择 div 内的子 img。要获得 div，我有这个选择器：如何使用选择器获取子 img？
vue.js For循环，vue.js v-for使用
05-03
- `v-for`优先级高于其他指令，所以不能与`v-if`直接在同一元素上使用，应将`v-if`放在`v-for`内部或外部以避免性能问题。 - 避免在`v-for`中直接修改遍历的数据，这可能会导致意外的副作用，推荐使用`Vue.set()`...
Android解析XML(PULL)展示到ListView
01-20
示例中的XML数据包含一个`students`根节点，内部循环遍历`student`节点，每个节点包含`name`和`sex`子节点。在解析XML时，这些数据会被映射到Student对象，再由适配器填充到ListView的各个列表项。 11. **进度...
面试及常见问题总结（偏Java）
12-29
在Java面试中，掌握一些基础和深入的知识点是至关重要的。...以上是面试中可能遇到的Java及相关技术问题的详细解答，涵盖了从基础知识到高级概念的广泛内容。这些知识不仅适用于面试，也是日常开发的重要基础。
c++ mfc 贪吃蛇简单实现（c++2013上写的）
06-05
这里我们可以用一个结构体或类来表示蛇的一个节点，再用一个动态数组或链表来存储所有节点。 2. **食物**：随机出现在游戏区域的某个位置，被蛇吃到后会增加蛇的长度，同时刷新食物的位置。 3. **移动和碰撞检测**...
echarts使用总结
weixin_46408500的博客
12-01 792
1、项目中用到的一些属性 // 初始化echart实例 var echart = echarts.init(document.getElementById("container")); // 定义选项 var option = { // 标题 title:{text:"前端大讲堂数据"}, // 鼠标提示 tooltip:{}, // 图例 legend:{data:["人数","人气","年龄分布"]}, // x轴线 xAxis:{d...
element-plus tree树形控件无法获取子节点解决办法(已解决)
qq_68575975的博客
01-17 1419
当然还有一个bug这样做，就是当折叠面板变化的时候这个中间数组的值并没有变，所有要做的是。看官网介绍这些个方法都是可以用的但是笔主用vue3的组合式api获取dom时。通过node.checkedKeys我们可以的到所有被选中子节点的id。通过这个change事件把这个临时数组 Ary=[]等于一个空数组。思路：通过check会返回两个回调参数(data,node)这样每次折叠面板改变后就依然是新的tree树。这是树形控件 要怎么获取子组件id呢。利用事件中的checked 方法。这样就可以拿到id了。
uniapp二次封装slider滑块实现刻度尺设置全局页面字体大小
ych1274816963的博客
12-20 4094
前言 uniapp没有现成的刻度尺滑块实现调整字体大小的功能，通过找到u-view的slider滑块来实现刻度尺方式设置全局字体大小的二次封装。 总体思路：通过刻度尺的方式选择用户合适的字体效果，上面显示用户调整的字体大小来看效果，设置成功后将 像素值 存入vuex以及本地localstorage，防止下次进入App后字体恢复原样， 通过uniapp 提供的 <page-meta>标签的 root-font-size 属性来控制页面根文字大小，页面内容采用r...
uniapp 多端兼容开发遇到的问题总结（四) ——专题：uView在弹出层里使用索引列表
NurTuam—何永杰
11-06 7496
前言 在使用uView开发项目中，遇到了一个业务场景： 点击输入框弹出底部窗口，内置电话号码区号索引列表，点击切换区号 : 当我根据逻辑以为在 u-popup 里加入 u-index-list 就行了，结果遇到问题了： 索引列表滚动不了； 选择索引字符，列表吸顶不了； 瞄点与顶部距离有偏差。 所以作者开始排查，但api文档没写相关用法，于是开始百度，但发现大家都在询问…（可能大家也百度过这类文章：https://ask.dcloud.net.cn/question/103729） 于是作者只能去修改源
uView的Waterfall 瀑布流，实现单列，加载更多
糜家智の博客
10-16 6269
这是根据uView的Waterfall 瀑布流来更改的，原组件是左右两列，本次更改主要是列表分页展示，结合官方文档以及此文章即可实现 更改为单个数据，原组件是左右 根目录下找到该组件进行更改 uview-ui/components/u-waterfall/u-waterfall.vue 在中间加入自己定义的all <template> <view class="u-waterfall"> <view id="u-left-column" class="u-colu
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3952
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
children获取孙节点
weixin_46286422的博客
08-06 1312
在这次的项目里，我在用JS克隆标签出现了一个问题，children[i].children控制面板能看到被赋值，结果HTML打印不出来多方查询资料，也没有找到解决方法。最后，仔细研究了JS里children这个方法，我找到了问题的所在。孙节点中只有一个元素，但是，children这个方法是获取一个DOM所有子元素的集合，就算只有一个元素，children获取的也是一个集合。很多人在看到孙元素只有一个的时候会下意识的忽略children是一个集合。在子节点后面加上数组序号children[i].childre
[VUE]Vue中的for循环引发的一系列问题；for循环无法数据绑定；渲染原理；
qq_31103801的博客
06-08 1878
vue中的for循环引发的一系列问题； for循环无法数据绑定； for循环渲染dom原理；
this.$refs获取不到子组件
最新发布
07-28
问题的原因是在调用this.$refs获取子组件时，可能子组件还未渲染完成。为了解决这个问题，可以在mounted生命周期钩子中使用this.$nextTick来确保子组件已经渲染完成。\[1\]另外，如果ref是循环出来的，有多个重名，那么ref的值会是一个数组，此时可以通过循环来获取单个的ref。\[2\]如果是父组件调用子组件方法时出现这种情况，也可以在调用方法的时候使用this.$nextTick来确保子组件已经渲染成功。\[3\] #### 引用[.reference_title] - *1* [this.$refs获取不到子组件](https://blog.csdn.net/weixin_43239880/article/details/124165856)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [this.$refs 获取不到解决办法](https://blog.csdn.net/poppymilan/article/details/108448352)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue 父组件使用this.$refs调用子组件报错，undefined、not a function问题解决方法](https://blog.csdn.net/m0_58893670/article/details/130379816)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值