javascript / intermediate
Snippet
Dynamic Template Refs in v-for
When the ref attribute is used inside a v-for loop, Vue automatically populates the target reactive reference with an array of elements or component instances. This is the standard way to programmatically interact with a dynamic list of children.
snippet.js
javascript
1
2
3
4
const itemRefs = ref([]);// Template usage:// <li v-for="item in list" ref="itemRefs">{{ item }}</li>
vue
Breakdown
1
ref([])
Initializes a reactive array that will hold the references to all rendered items in the loop.