[Vuejs]-How can I dynamicly set the scale of an element so it transitions to the new transform after the component is mounted?

by

1👍

Well you can use Vue refs (docs) to get the element instead of document.getElementsByClassName since that’s the Vue way of interacting with the DOM.

Or you could simply add the style in the template at render time. I assume "contributions" is an object that includes scale properties, so something along these lines in the v-for should get what you want.

<div v-for="(contribution, index) in contributions" 
:key="index" 
:value="contribution" 
:data-scale="contribution.scale"
v-bind:style="{ transform: 'scale('+ contribution.scale + ')' }" 
class="contribution-layer" />

Note the transform property needs to be a string to work.

👤Bryce Howitson

Leave a comment