vue3+ts，使用v-for为多个输入框分配ref属性

首先，我们知道为单个输入框分配ref属性，只需要用以下方法即可：

const inputRef = ref();

<a-input ref="inputRef "/>
  • 但是对于想使用v-for循环遍历赋值给到对应的item组件的ref属性的话。
  • 不能直接就是**:ref=“item.xxxRef”**!!!
  • 这样无法正确将DOM元素绑定到item.toRef属性。 而是需要使用箭头函数的写法。
  • 详情看下方的例子：
//e.g
let flightInfo = reactive<any[]>([
{
FromOptions: [],
ToOptions: [],
flightLocDateOpen:false,
fromRef:null,
toRef:null
},{
FromOptions: [],
ToOptions: [],
flightLocDateOpen:false,
fromRef:null,
toRef:null
},{
FromOptions: [],
ToOptions: [],
flightLocDateOpen:false,
fromRef:null,
toRef:null
}
])

<template>
  <div>
    <div v-for="(item, index) in flightInfo" :key="index">
      <input type="text" v-model="item.toAirport" :ref="ref => item.toRef = ref" />
    </div>
  </div>
</template>

:ref=“ref => item.toRef = ref” ==>这样每个输入框的toRef属性都会正确地指向对应的DOM元素；

  1. 因为在Vue模板中，:ref指令绑定的值需要是一个函数或一个响应式对象。
  2. 这是因为Vue需要在组件渲染时执行绑定的函数或更新绑定的对象。
    当你使用:ref="item.toRef"时，item.toRef将被视为普通的表达式，而不是一个函数或响应式对象。这样会导致Vue无法正确地处理ref绑定，从而无法将DOM元素分配给item.toRef。
  3. 为了正确地绑定ref，我们需要将其设置为一个函数，函数的参数是DOM元素的引用。在函数内部，我们可以将DOM元素引用赋值给item.toRef，以便在组件中使用。
  4. 因此，我们使用:ref="ref => item.toRef = ref"这种写法，其中箭头函数接收ref作为参数，并将其赋值给item.toRef。
  5. 这样，当组件渲染时，Vue会执行这个函数，并在DOM元素准备就绪时将其引用分配给item.toRef。

总结起来，:ref需要一个函数或响应式对象来正确绑定DOM元素的引用。通过将箭头函数设置为:ref的值，我们可以在函数内部执行赋值操作，将DOM元素的引用分配给item.toRef。