today, I used ref function to get a reference to an element and got a problem that the value of this ref object is null when using it in onMounted() function. Then, to solve this problem, I search for ref on official vue website, but I found a new function: useTemplateRef() instead of ref. At this point, I know the vue version has become 3.5+. Vue team has replaced ref fucntion with useTemplateRef() to get element references, but when I use this new fucntion in the code ref function is used, it still doesn't work. After Thinking a lot of time, I finally found the problem:
<script setup>
/*** code *** /
........code
function initThree() {
let container= useTemplateRef('container');
}
........code
onMounted(()=>{
container.appendChild(...);
})
/*** code *** /
</script>
this is because the setup syntactic sugar puzzles me. let's turn back the essence of setup:
<script>
/*** code *** /
........code
setup() {
function initThree() {
let container= useTemplateRef('container');
}
return { container };
}
........code
onMounted(()=>{
container.appendChild(...);
})
/*** code *** /
</script>
here I defined container variable inside an inner function, so that it cannot be accessed in the top scope of setup().
Top comments (0)