[Vuejs]-Different datas for each element inside vue-for cycle

by

0👍

✅

You are referencing circlePositionStyle as the data property, so if that value changes, it will change for every item that refers to it.

Instead, change your function to return the value of curclePositionStyle instead of mutating the data property.

inquadraThumb(back) {


            var thumbHeight = 100;
            var calculatedThumbPositionY = (back.Ypos * thumbHeight) / 500;
            var calculatedThumbPositionX = (back.Xpos * calculatedThumbPositionY) / back.Ypos;

            return "transform: scale(4); height: " + thumbHeight + "px;transform-origin:" + calculatedThumbPositionX + "px " + calculatedThumbPositionY + "px;";
        }

You will also need to slightly adjust the tag:

<img class="img-fluid " :src="background.path" v-on:click="changeBack(background)" :style="inquadraThumb(background)">

Leave a comment