Question

在我的vue.js应用程序上，我想绘制几个矩形（数字取决于数组的长度）以及它们之间的直线。为此，我有4个数据x，y，nextX，netxY，这些数据将在绘图过程中进行更新。

这是我的数据

data () {
    return {
        x: 25,
        y: 25,
        nextX: null,
        nextY: null,
        elemntList: []
    }
}

这是我的方法

<div v-for="element in elementsList" v-bind:key="element.model">
    <v-rect :config="getConfigRect()"></v-rect>

    {{ $calculNextPosition(element.model) }}

    <v-line :config="getConfigLine()"></v-line>

    {{ $setOriginOnNextPosition() }}
</div>

getConfigRect必须具有x和y参数

要画一条线，我需要未来的位置，在该位置将绘制下一个矩形因此，getConfig行必须具有x和y参数（起点）以及nextX和nextY参数（终点）。

  methods: {
    $calculNextPosition: function() {
        this.nextX = this.x + 100;
        this.nextY = this.y;
    },
    $setOriginOnNextPosition: function() {
        this.x = this.nextX;
        this.y = this.nextY;

        this.nextX = null;
        this.nextY = null;
    },
    getConfigRect: function() {
        return {
            x: this.x,
            y: this.y,
            width: 20,
            height: 20,
            fill: 'white',
            stroke: '#016FBF',
            strokeWidth: 2,
            offset: 10
       }
    },
    getConfigLine: function() {
        return  {
            points: [this.x, this.y, this.nextX, this.nextY],
            stroke: 'red',
            strokeWidth: 15,
            offset: 20
       } 
    },
}

这个简单的代码将下一个矩形比上一个矩形多100个像素。但是我的v-for循环被称为无限。问题是由于$ setOriginOnNextPosition函数。如果删除该方法，则该循环仅被调用一次。

为什么一次又一次调用我的v-for循环？如果必须使用计算方法，如何重构代码才能成功？

编辑：也许重置我的x和y数据会重新加载整个视图并再次调用循环...

Answer 1

我认为您不能依赖于在v-for期间更改模型状态，但是也许有人对vue.js有了真正的了解，但可能知道如何做到这一点。

如果必须使用计算方法，如何重构代码才能成功？

您可以做的一件事是像这样从v-for获取索引：

<div v-for="(element, index) in elementsList" v-bind:key="element.model">

然后只需将index传递到您的计算中，这样您就无需在v-for运行时依赖于更改状态。

因此，与其在v-for循环中更新x和y，不如从索引中计算x和y。

看来y从未改变，因此您可以参考this.y。

对于x，它每次增加100，因此您可以使用一种方法来计算x的值：

methods: {
    computeX(index) {
        return this.x + 100 * index;
    }
}

然后在您的getConfigRect和getConfigLine方法中使用this.x1(index)代替this.x：

getConfigRect: function(index) {
    return {
        x: this.x1(index + 1),
        y: this.y,
        width: 20,
        height: 20,
        fill: 'white',
        stroke: '#016FBF',
        strokeWidth: 2,
        offset: 10
   }
},
getConfigLine: function(index) {
    return  {
        points: [this.computeX(index + 1), this.y, this.computeX(index), this.nextY],
        stroke: 'red',
        strokeWidth: 15,
        offset: 20
   } 
},

以这个为例（我无法在合理的时间内对其进行测试）。它应该给你一个主意。

Answer 2

这是未经测试的，但我会这样做。基本上，它循环多次并传递当前循环号（我做i-1，因为v-for将值从1开始，并使用0开始使计算更好）到getConfig方法。 getConfig方法根据起始值，i值和步长值计算下一个位置。

HTML：

<div v-for="i in numElems">
    <v-rect :config="getConfigRect(i-1)"></v-rect>

    <v-line :config="getConfigLine(i-1)"></v-line>
</div>

JavaScript：

data() {
    return {
        startX: 25,
        startY: 25,
        stepX: 100,
        numElems: 4
    }
},

methods: {
    getConfigRect: function(i) {
        return {
            x: this.getX(i),
            y: this.getY(i),
            width: 20,
            height: 20,
            fill: 'white',
            stroke: '#016FBF',
            strokeWidth: 2,
            offset: 10
       }
    },

    getConfigLine: function(i) {
        return  {
            points: [this.getX(i), this.getY(i), this.getX(i+1), this.getY(i+1)],
            stroke: 'red',
            strokeWidth: 15,
            offset: 20
       } 
    },

    getX: function(i) {
        return this.$data.startX + i * this.$data.stepX;
    },

    getY: function(i) {
        return this.$data.startY;
    }
}

Vue.js 2 v-for循环调用到无限

2 个答案: