I was reading the documentation of vue 3 and I decided to test refs
in my local development environment. I am using vue version 3.2.31
and set up my project according to vue official guide. So for testing "refs" in my component, I just copied and pasted the code in this url that is the Playground of vue site. That means the code of my component is this:
<script setup>
import { ref, onMounted } from 'vue'
const list = ref([1, 2, 3])
const itemRefs = ref([])
onMounted(() => {
console.log(itemRefs.value.map(i => i.textContent))
})
</script>
<template>
<ul>
<li v-for="item in list" ref="itemRefs">
{{ item }}
</li>
</ul>
</template>
But in the console I receives an empty array. Am I missing something to do to see the output array of texts in li
tags?
CodePudding user response:
This is a known bug (vuejs/core#5525
), where array refs are not properly populated.
One workaround is to bind a function that pushes the template refs into the array instead:
<template>
<ul>