Итак, в моем проекте есть несколько компонентов Row.У каждой строки есть кнопка под ней, которая должна вставить еще одну строку под ней.
Каждая строка может содержать несколько других элементов, которые представлены с использованием другого массива в компоненте строки.
Всякий раз, когда я пытаюсь добавить еще одну строку в любом месте, Vue просто повторно использует данные внутри этой строки вНедавно добавленный компонент перемещает все остальные под ним, так что всегда, когда вы нажимаете кнопку «Добавить строку», он всегда добавляется внизу.
Странно, когда я использую какую-то случайную перетасовкуФункция вроде rows.sort (() => Math.random () - 0.5), она случайным образом переупорядочивает список.
Вот родительский компонент, который может содержать любое количество компонентов Row.
<template>
<Row v-for="(row, index) in rows" :key="index"></Row>
</template>
<script>
import Row from "./Row.vue";
export default {
components: {
Row
},
data: function() {
return {
rowCounter: 0,
rows: [{ name: "Row 0" }]
};
},
mounted() {
this.$root.$on("addRow", this.addRow);
},
methods: {
addRow(rowCount) {
this.rowCounter += 1;
this.rows.splice(rowCount + 1, 0, {
name: `Row ${this.rowCounter}`
});
}
}
};
</script>
И код для компонента Row:
<template>
<!-- Just some dynamic components which can be added here -->
</template>
<script>
methods: {
addRow() {
this.$root.$emit("addRow", this.$vnode.key);
},
}
</script>
Список следует перестроить, но Vue просто повторно использует данные внутри компонента.
Я не знаю, что я пропускаюздесь, но было бы здорово, если вы, ребята, можете мне помочь.Спасибо!