I am currently facing a challenge with utilizing dynamic refs in the Vue Composition API. According to the Vue documentation, it suggests using the following approach:
<div v-for="item in list" :ref="setItemRef"></div>
import { onBeforeUpdate, onUpdated } from 'vue'
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
setItemRef
}
}
}
However, in my simplified code snippet below:
<template>
<section
v-for="(item, i) of storyList"
:ref="(el) => { if (el) { divs.push(el) } }"
/>
</template>
<script lang="ts">
[...]
export default defineComponent({
props: {
storyList: {
type: Array as () => StoryList,
required: true,
},
},
setup() {
const divs = ref([])
return { divs }
},
})
</script>
... I observed only the following output in my Vue Dev Tools:
data:
divs:Array[0]
$refs:
function(el) { if (el) { _vm.divs.push(el) } }:Array[4]
0:<section id="story-0" class="story-item">
1:<section id="story-1" class="story-item">
2:<section id="story-2" class="story-item">
3:<section id="story-3" class="story-item">
This results seems off, doesn't it?
I should be accessing the refs from divs, rather than $refs (which is not functional in vue 3), correct?