Different datas for each element inside vue-for cycle - laravel

Question

I'm new to Vue and since my start some week ago I find myself really happy about it and the way it can be combined with pure javascript.
I'm running this code inside a laravel blade template:
<template v-for = "background in backgrounds" >
<template v-if="currentBackground.path === background.path">
<div class="m-1 background inline-block rounded-circle" style="width: 100px; height: 100px; overflow: hidden">
<img class="img-fluid " :src="background.path" v-on:click="changeBack(background)" :style="circledPositionStyle" v-on:load="inquadraThumb(background)">
</div>
</template>
</template>
And in the script section:
data() { return {
[...]
frontObjects : '',
circledPositionStyle : '' }},
methods: {
[...],
inquadraThumb(back) {
var thumbHeight = 100;
var calculatedThumbPositionY = (back.Ypos * thumbHeight) / 500;
var calculatedThumbPositionX = (back.Xpos * calculatedThumbPositionY) / back.Ypos;
this.circledPositionStyle = "transform: scale(4); height: " + thumbHeight + "px;transform-origin:" + calculatedThumbPositionX + "px " + calculatedThumbPositionY + "px;";
},
Now, the code works just fine, but all the images generated in the loop have the same circledPositionStylestyle applied... How can I manage to have different values for each cycle?

Answer 1

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)">