CODEWITHSUNDEEP
javascriptvuejs3computed-properties
vueprogrammer
vueprogrammer

Reputation: 11

Why vue computed property doesn't become reaective?

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;

Upvotes: 0

Views: 268

Answers (1)

REEL
REEL

Reputation: 26

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:

Upvotes: 0

Related Questions