vue-使用refs取值,打印出来是个数组??

news2024/12/22 19:30:26

背景:

经常使用$refs去获取组件实例,一般都是拿到实例对象,这次去取值的时候发现,拿到的竟然是个数组。

原因:

这是vue的特性,自动把v-for里面的ref展开成数组的形式,哪怕你的ref名字是唯一的!

我是通过循环接口的数据,生成各个省份的树,虽然我通过加id的形式,想要让树变成唯一,方便通过$refs调用,但是通过循环生成的树,调用的时候就是数组形式

<div class="flex-tree" v-for="item in fakeRegionData" :key="item[0].id">
    <el-tree :data="item"
        show-checkbox
        node-key="id"
        :ref="'tree'+item[0].id"
        highlight-current
        :props="{children: 'children',label: 'name'}"
        :default-expanded-keys="expandedData"></el-tree>
</div>


//给树赋值
handleSetCheckedKeys(val) {
            this.regionData.map(item => {
                console.log(this.$refs['tree'+item.id])
                
                this.$refs['tree'+item.id][0].setCheckedKeys(val)
            })
        },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2151897.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DataX--Web:图形化界面简化大数据任务管理

在处理大数据任务时&#xff0c;频繁地修改配置文件或编写脚本可能会变得繁琐且容易出错。DataX Web提供了一个图形化界面&#xff0c;旨在简化这些操作&#xff0c;让用户通过直观的界面管理数据同步任务。 DataX Web简介 DataX Web是一个开源项目&#xff0c;它允许用户通过…

帧率和丢帧分析理论

一、丢帧问题概述 应用丢帧通常指的是在应用程序的界面绘制过程中&#xff0c;由于某些原因导致界面绘制的帧率下降&#xff0c;从而造成界面卡顿、动画不流畅等问题。以60Hz刷新率为例子&#xff0c;想要达到每秒60帧&#xff08;即60fps&#xff09;的流畅体验&#xff0c;每…

Python 序列( 列表 字典 元组 集合)

列表简介&#xff1a; 1.列表&#xff1a;用于存储任意数目、任意类型的数据集合。 2.列表是内置可变序列&#xff0c;是包含多个元素的有序连续的内存空间。列表的标准语法格式&#xff1a;a[10,20,30,40]其中&#xff0c;10,20,30,40这些称为&#xff1a;列表a的元素。 3.…

海外云市场分析

海外云市场数据洞察 2024 H1 季度数据 H1季度,全球云基础设施服务指数同比增长21%,达到798亿美元 (相比去年增加134亿美元),三大云服务提供商— AWS,微软Azure 和GCP 营收总增长率为24%,占总市场66%。 其中三大云厂商同比营收增长排序(2024 H1):微软 31%,G…

用户态缓存:环形缓冲区(Ring Buffer)

目录 环形缓冲区&#xff08;Ring Buffer&#xff09;简介 为什么选择环形缓冲区&#xff1f; 代码解析 1. 头文件与类型定义 1.1 头文件保护符 1.2 包含必要的标准库 1.3 类型定义 2. 环形缓冲区结构体 2.1 结构体成员解释 3. 辅助宏与内联函数 3.1 min 宏 3.2 is…

【Python报错已解决】xlrd.biffh.XLRDError: Excel xlsx file; not supported

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 专栏介绍 在软件开发和日常使用中&#xff0c;BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…

最新LinPay码支付 免签支付系统源码 免授权版本(含搭建教程)

最新LinPay码支付 免签支付系统源码 免授权版本 服务集成商兼容市面所有易支付&#xff0c;兼容所有商城LinPay是专为个人站长打造的聚合免签系统&#xff0c;拥有卓越的性能和丰富的功能。它采用全新轻量化的界面UI&#xff0c;让您能更方便快捷地解决知识付费和运营赞助的难…

中间件知识点-消息中间件(Rabbitmq)一

消息中间件介绍 MQ的作用(优点)主要有以下三个方面&#xff1a; a.异步 b.解耦 c.削峰 MQ的作用(缺点)主要有以下三个方面&#xff1a; a.系统可用性降低 b.系统复杂度提高 c.存在消息一致性问题需要解决 备注&#xff1a; 引入MQ后系统的复杂度会大大提高。 以前服务之间可以…

移动开发(三):使用.NET MAUI打包第一个安卓APK完整过程

目录 一、修改AndroidManifest.xml 配置APP基本信息权限 二、修改项目属性调整输出Android包格式为APK 三、项目发布 四、APP分发 五、总结 之前给大家介绍过使用使用.NET MAUI开发第一个安卓APP,今天给大家介绍如何打包成APK,然后安装到安卓手机正常运行。这里还是沿用…

如何下载ComfyUI开发版

看B站视频&#xff0c;见用绘世可以下载ComfyUI开发版&#xff0c;而我又不想在电脑里放太多东西&#xff0c;于是研究了一下&#xff0c;如何直接从GitHub网站下载。具体步骤看图示。 看压缩包内容&#xff0c;应该直接解压覆盖就可以了&#xff0c;暂未有时间测试。

【JS】ESMoudle机制与符号绑定

前言 JS 模块化有两种方式&#xff0c;分别为&#xff1a;CommonJS 和 ESModule。与 CommonJS 不同&#xff0c;ESModule 是静态模块系统&#xff0c;意味着在代码编译阶段&#xff08;而不是运行时&#xff09;&#xff0c;模块依赖关系就已经被确定。 ESModule 优势 更好地…

传知代码-多示例AI模型实现病理图像分类

代码以及视频讲解 本文所涉及所有资源均在传知代码平台可获取 概述 本文将基于多示例深度学习EPLA模型实现对乳腺癌数据集BreaKHis_v1的分类。EPLA模型是处理组织病理学图像的经典之作。EPLA模型是基于多示例学习来进行了&#xff0c;那么多示例学习模型对处理病理学图像具有…

VCNet论文阅读笔记

VCNet论文阅读笔记 0、基本信息 信息细节英文题目VCNet and Functional Targeted Regularization For Learning Causal Effects of Continuous Treatments翻译VCNet和功能目标正则化用于学习连续处理的因果效应单位芝加哥大学年份2021论文链接[2103.07861] VCNet和功能定向正…

java数据结构----树

二叉查找树 二叉查找树的API设计 put方法的实现思想: public class BinaryTree<Key extends Comparable<Key>, Value> {private Node root;private int N;public int size(){return N;}public void put(Key key, Value value){root put(root,key,value);}public …

k8s 中的 Ingress 简介

一、关于 Ingress Ingress 是 K8s 中的一个 API 对象&#xff0c;用于管理和配置外部对集群内服务的访问。它可定义 HTTP 和 HTTPS 路由规则&#xff0c;将请求从集群外部的负载均衡器引导到相应的服务。Ingress 的灵活性使得我们能够实现高级的应用程序路由、SSL 终端和负载均…

一种新的电子邮件攻击方式:AiTM

新的攻击组利用合作伙伴组织之间的信任关系来绕过多重身份验证。 一种新的攻击方式开始出现&#xff0c;它利用合作伙伴组织之间的信任关系绕过多重身份验证。在一个利用不同组织之间关系的攻击中&#xff0c;攻击者成功地对四家或更多组织进行了商业电子邮件欺诈(BEC)攻击&…

中泰免签,准备去泰国旅游了吗?《泰语翻译通》app支持文本翻译和语音识别翻译,解放双手对着说话就能翻译。

泰国是很多中国游客的热门选择&#xff0c;现在去泰国旅游更方便了&#xff0c;因为泰国对中国免签了。如果你打算去泰国&#xff0c;那么下载一个好用的泰语翻译软件是很有必要的。 简单好用的翻译工具 《泰语翻译通》App就是为泰国旅游设计的&#xff0c;它翻译准确&#x…

Golang | Leetcode Golang题解之第420题强密码检验器

题目&#xff1a; 题解&#xff1a; func strongPasswordChecker(password string) int {hasLower, hasUpper, hasDigit : 0, 0, 0for _, ch : range password {if unicode.IsLower(ch) {hasLower 1} else if unicode.IsUpper(ch) {hasUpper 1} else if unicode.IsDigit(ch)…

Python | Leetcode Python题解之第421题数组中两个数的最大异或值

题目&#xff1a; 题解&#xff1a; class Trie:def __init__(self):# 左子树指向表示 0 的子节点self.left None# 右子树指向表示 1 的子节点self.right Noneclass Solution:def findMaximumXOR(self, nums: List[int]) -> int:# 字典树的根节点root Trie()# 最高位的二…

大模型中常见 loss 函数

loss 函数 首先&#xff0c;Loss 是允许不降到 0 的&#xff0c;模型计算的 loss 最终结果可以接近 0。 可以成为 loss 函数的条件## 常用 loss 以下函数调用基于 Pytorch&#xff0c;头文件导入&#xff1a; import torch.nn as nn 均方差&#xff08;MSE&#xff09; nn.…