vue3如何批量设置动态ref

这篇具有很好参考价值的文章主要介绍了vue3如何批量设置动态ref。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

示例如下:文章来源地址https://www.toymoban.com/news/detail-656566.html

<template v-for="item in selectList">
	<el-select v-model="item.value" :ref="el => setRef(el, item)">
	    <el-option
	      v-for="v in item.options"
	      :key="v.value"
	      :label="v.label"
	      :value="v.value"
	    />
	  </el-select>
 </template>
const state = reactive({
	selectList:[
		{ key:'aaa', value:'', options:[{ label:'测试', value:'1' }]},
		{ key:'bbb', value:'', options:[{ label:'测试', value:'1' }]} 
	]
})
const { selectList } = toRefs(state)
const selectRef = ref({}) as any;

//动态设置ref
const setRef= (el, item) => {
  if (el) {
    selectRef.value[item.key] = el
  }
}

console.log(selectRef.value['aaa'])
// 打印出来的值为 动态绑定的选择框aaa的ref属性

到了这里,关于vue3如何批量设置动态ref的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3中动态设置echarts图的高度

    近期写个vue3项目,中间要使用echarts图,因为要适配不同的显示器,简直快被搞疯了。这个问题搞了无数次,但每次都会遇到,记录一下本次的解决方案 组件中只需要把html标签写出来就行了,然后加JavaScript代码 样式我就不写了,外层是个elementplus中的el-card,内层是要渲染的

    2024年02月16日
    浏览(31)
  • vue3,动态引入组件,同时动态设置组件的name,用于keep-alive缓存

    如果有两个页面逻辑大都相同,咱们想到的第一个肯定是写一个组件,然后两个路由都指向这个组件。 那如果现在多添加一个需求:两个页面在切换路由时都需要缓存数据,并且两个页面的缓存数据要求独立。 这个需求很简单:在router-view外层包裹一个keep-alive组件,指定缓

    2024年02月14日
    浏览(39)
  • Vue3:ref(‘ ‘)、ref(null)与ref()

    今天在分析项目源码的时候偶然发现之前的程序员在通过ref获取子组件的方法的时候,总是喜欢用ref(null),什么意思呢 就是我引用了一个组件,并且想要使用组件内的value,那么常规操作就是 import 组件名 from \\\'组件的路径\\\' ,然后再在 template 模板中加上组件的标签,即 组件

    2024年02月14日
    浏览(34)
  • vue3,vite开发, 动态引入组件,同时动态设置组件的name,用于keep-alive缓存

    如果有两个页面逻辑大都相同,咱们想到的第一个肯定是写一个组件,然后两个路由都指向这个组件。 那如果现在多添加一个需求:两个页面在切换路由时都需要缓存数据,并且两个页面的缓存数据要求独立。 这个需求很简单:在router-view外层包裹一个keep-alive组件,指定缓

    2024年02月07日
    浏览(39)
  • 微信小程序js如何动态设置css

    微信小程序中可以使用setData()方法动态设置CSS样式。 例如,我们可以在wxml文件中定义一个样式类: ``` view class=\\\"my-class\\\"Hello World/view ``` 然后在js文件中使用setData()方法动态设置该样式类的CSS样式: ``` Page({   data: {     myClassStyle: \\\'\\\'   },   onLoad: function () {     this.setData({    

    2024年02月09日
    浏览(35)
  • vue3 ref()

    通常我们在获取子组件的数据和方法的操作 解决  ref 对子组件进行数据的获取以及方法的触发 不同  需要在子组件 通过defineExpose进行方法的,数据的 暴露 案例   父组件 子组件

    2024年02月13日
    浏览(33)
  • vue3使用$refs

    一、说明 vue3中访问$refs绑定的组件的属性或者方法,我们会使用$refs。但是Vue3不同于Vue2,在 Vue3的setup中无法访问到this,使用getCurrentInstance方法 二、使用 二、效果

    2024年02月07日
    浏览(30)
  • vue3 #ref #reactive

    一、ref 函数将简单类型的数据包装为响应式数据 import { ref } from \\\'vue\\\'  const count = ref(10) 一、reactive函数将复杂类型的数据包装为响应式数据 import { reactive} from \\\'vue\\\'  const obj= reactive({     name : \\\'zs\\\',     age : 18 })

    2024年02月22日
    浏览(42)
  • vue3的refs用法

    前言: Vue 3的Refs是一种新的API,用于访问DOM元素或组件实例。Refs提供了一个简单的方法来访问DOM元素或组件实例,以便在Vue组件中进行操作和处理。在Vue3中,refs用于获取组件或DOM元素的引用,类似于Vue2中的$refs。但与Vue2不同的是,在Vue3中,refs可以是一个字符串或一个函数

    2024年02月15日
    浏览(41)
  • 【Vue3】vue3通过ref获取元素离顶部的距离

    vue3版本 ^3.2.45 [ref].value.$el.getBoundingClientRect().top 通过ref获取元素。 使用 getBoundingClientRect().top 获取离顶部的距离 homeView.vue

    2024年02月15日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包