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

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 Line 必须有 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

这是未经测试的，但我会这样做。基本上，它循环多次并将当前循环数（我做 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;
    }
}

Answer 2

我认为您不能依赖在 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
   } 
},

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