CODEWITHSUNDEEP
vue.jsvuejs3vue-composition-api
KarimS
KarimS

Reputation: 3892

vue 3 reactive/computed nested variable string

I'm facing an issue with reactive data in vue3 new composition api, here is what i'm trying to do

Setup

const imagesStyles = computed(() => {
  return { 'transform': `scale(${scale.value}) rotate(${rotation.value})` }
});

Template :

 <img
              :key="index"
              :src="images[index]"
              :style="imagesStyles" />

however, even if the value of rotation/scale, the transform property do not change inside the styles, but if i change color value its working flawlessly on the tag style

But what more weird, is that i tried to debug using {{imageStyles}} to show its value directly as text inside html, and its updating correctly.

do you have any idea why that is not working?

Upvotes: 1

Views: 547

Answers (1)

KarimS
KarimS

Reputation: 3892

SOLVED --

Always check that there is no missing units in your css property because its won't update if so

it was missing the deg unit so when rotate value was 0 its was working, but as soon as it change, it don't render anymore

Upvotes: 1

Related Questions