vue 3 reactive/computed nested variable string

Question

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?

karim karim · Accepted Answer · 2020-11-20T20:45:26

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

vue 3 reactive/computed nested variable string

1 Answers