vue.js - 如何在 Vue3 v-for Array Refs 中传递索引

Question

在 document ，它给出了代码:

<div v-for="item in list" :ref="setItemRef"></div>

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}

但我也想将 v-for 索引传递给处理程序，就像这样:

// fake code
 <div v-for="(item, index) in navItems" :key="index":ref="setNavItemRefs($el, index)">
   <span>{{ item }}</span>
 </div>

如何绑定(bind)这个索引？

Answer 1

尝试定义一个内联处理程序，例如:

<div v-for="item in list" :ref="(el)=>setItemRef(el,index)"></div>

和

 const setItemRef = (el,index) => {
      if (el) {
        itemRefs.push(el)
      }
    }