Una parte de la configuración de mi script:
const storyVideo = ref("storyVideo") const topBar = computed(() => { return 'background-position: ' + (storyVideo?.value?.currentTime / store.instagram.story[store .currentStory].duration) * 100 + '% 0;' }) storyVideo es un elemento de video con ref="storyVideo" y puntos de store para la tienda Pinia
Lo asigné a un elemento usando :style="topBar"
El estilo del elemento siempre es background-position: 0% 0; pero las variables usadas en la función cambian
Traté de registrar lo que se devuelve en esta función usando @click y console.log y todo se ve correctamente en los registros:
background-position: 9.07100199071002% 0;Parece que intenta acceder al elemento demasiado pronto, consulte la documentación https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
Tenga en cuenta que solo puede acceder a la referencia después de montar el componente. Si intenta acceder a la entrada en una expresión de plantilla, será nulo en el primer procesamiento. ¡Esto se debe a que el elemento no existe hasta después del primer renderizado!
Si está tratando de ver los cambios de una referencia de plantilla, asegúrese de tener en cuenta el caso en el que la referencia tiene un valor nulo: