vue-for循环内每个元素的不同数据答案

【问题标题】：Different datas for each element inside vue-for cyclevue-for循环内每个元素的不同数据
【发布时间】：2018-06-03 20:53:52
【问题描述】：

我是 Vue 的新手，自从一周前开始使用 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;";
            },

现在，代码工作得很好，但是循环中生成的所有图像都应用了相同的circledPositionStylestyle...如何才能为每个循环设置不同的值？

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

您将circlePositionStyle 引用为数据属性，因此如果该值发生更改，则引用它的每个项目都会更改。

改为更改您的函数以返回 curclePositionStyle 的值，而不是改变 data 属性。

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

【讨论】：

是的。谢谢，你为我节省了很多时间