Различные данные для каждого элемента в цикле vue-for

Question

Я новичок в Vue, и с тех пор, как я начал работать несколько недель назад, я очень рад этому и тому, как это можно сочетать с чистым javascript.Я запускаю этот код внутри шаблона лезвия laravel:

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

И в разделе сценариев:

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;";
            },

Теперь код работает просто отлично, но все изображения, сгенерированные вк циклу применяется один и тот же стиль circledPositionStyle ... Как мне получить разные значения для каждого цикла?

Answer 1

Вы ссылаетесь на circlePositionStyle как на свойство данных, поэтому, если это значение изменяется, оно будет меняться для каждого элемента, который к нему относится.

Вместо этого измените свою функцию, чтобы она возвращала значение curclePositionStyleвместо того, чтобы изменять свойство данных.

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;";
        }

Вам также нужно будет немного изменить тег:

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