vue3如何批量设置动态ref

示例如下:

<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属性

你可能感兴趣的:(vue,vue.js,javascript,前端)