Question

我是Vue的新手，自从我一周前开始以来，我发现自己真的很开心，并且可以将它与纯粹的javascript结合起来。我在laravel刀片模板中运行此代码：

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

现在，代码工作正常，但循环中生成的所有图像都应用了相同的import { ACTIVE_MONTH } from "../actions/types"; export default function(state = null, action){ switch(action.type){ case ACTIVE_MONTH: return Object.assign({}, state, { isFetching: false, fullyBooked: action.payload }) default: return state; } }样式...如何设置每个循环具有不同的值？

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

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

1 个答案: