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 вызывается снова и снова? Если мне нужно использовать вычисляемые методы, как я могу изменить свой код для успешного выполнения?

РЕДАКТИРОВАТЬ: Может быть, сбросить мои данные х и у перезагрузить весь вид и снова вызвать цикл ...

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.

Таким образом, вместо обновления x и y в цикле v-for вычислите, что x и y будут из индекса.

похоже, что y никогда не меняется, поэтому вы можете обратиться к this.y.

Для x оно увеличивается каждый раз на 100, так что вы можете иметь метод для вычисления того, каким будет x:

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

Затем используйте this.x1(index) вместо this.x в ваших методах getConfigRect и getConfigLine:

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

Возьмите это в качестве примера (ни в коем случае я не могу проверить это за разумное количество времени). Это должно дать вам представление.