Vuejs2 VueJS'中是否有任何功能；s v-for，使用它我可以强制vue不在我的组件中重用数据？

因此，在我的项目中有一些行组件。每一行下面都有一个按钮，单击该按钮可以在下面插入另一行

每行可以包含多个其他元素，这些元素使用行组件内的另一个数组表示

每当我尝试在任何位置添加另一行时，Vue都会在新添加的组件中重用该行内的数据，并将其下方的所有其他数据移动，因此无论何时单击“row add”（行添加）按钮，它都会添加到底部

奇怪的是，当我使用诸如rows.sort（（）=>Math.random（）-0.5）之类的随机洗牌函数时，它会随机地重新排列列表

下面是父组件，它可以包含任意数量的行组件

<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.vue”导入行；
导出默认值{
组成部分：{
一行
},
数据：函数（）{
返回{
行计数器：0，
行：[{name:“行0”}]
};
},
安装的（）{
this.$root.$on（“addRow”，this.addRow）；
},
方法：{
addRow（行计数）{
这个.rowCounter+=1；
this.rows.splice（rowCount+1,0{
名称：`Row${this.rowCounter}`
});
}
}
};

以及行组件的代码：

<template>
 <!-- Just some dynamic components which can be added here -->

</template>

<script>
methods: {
  addRow() {
      this.$root.$emit("addRow", this.$vnode.key);
    },
}
</script>

方法：{
addRow（）{
this.$root.$emit（“addRow”，this.$vnode.key）；
},
}

应该重新排列列表，但Vue只是重用组件内的数据

---

我不知道我在这里忽略了什么，但如果你们能帮助我，那就太好了。谢谢

机制是

：key

属性，但您需要为每一行指定一个唯一的键，如：

：key=“row.id”

。

索引

不是唯一标识符，因为在

拼接

之后（例如），它不再指向同一行，但Vue无法知道这一点

请提供详细信息，并明确说明所需的行为。使任何试图帮助解决问题的人都能够在不做假设的情况下重现问题。您需要为每一行指定一个唯一的键，如：

：key=“row.id”