Some part of my script setup:
const storyVideo = ref("storyVideo")
const topBar = computed(() => {
return 'background-position: ' + (storyVideo?.value?.currentTime / store.instagram.story[store
.currentStory].duration) * 100 + '% 0;'
})
storyVideo is a video element with ref="storyVideo" and store points to Pinia store
I assigned it to an element using :style="topBar"
The element style is always background-position: 0% 0; but the variables used in the function change
I tried to log what is returned in this function using a @click and console.log and everything looks properly in logs:
background-position: 9.07100199071002% 0;
Looks like your trying to access the element too early, check the documentation https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
Note that you can only access the ref after the component is mounted. If you try to access input in a template expression, it will be null on the first render. This is because the element doesn't exist until after the first render!
If you are trying to watch the changes of a template ref, make sure to account for the case where the ref has null value: