How to pass index in Vue3 v-for Array Refs

Question

In document, it gives code:

<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
    }
  }
}

But I also want to pass the v-for index into handler, just like this:

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

How can I bind this index?

Boussadjra Brahim · Accepted Answer · 2021-06-06 10:59:01Z

5

Try out to define an inline handler like :

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

and

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

answered Jun 6, 2021 at 10:59

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joakimriedel Over a year ago

in search for a similar solution and tried this but got a compilation error on the lambda from vite, would you perhaps know if this construct is possible in vue3 combined with vite?

Boussadjra Brahim Over a year ago

could you share with me some code in codesanbox?

joakimriedel Over a year ago

seems to have been some temporary issue with vite or volar, no error with the latest version

Collectives™ on Stack Overflow

How to pass index in Vue3 v-for Array Refs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related