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?

KarimS · Accepted Answer · 2020-11-20 20:45:26Z

1

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

answered Nov 20, 2020 at 20:45

KarimS

3,90210 gold badges44 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue 3 reactive/computed nested variable string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related