Javascript Vue.js：将每个新项目添加到表的顶部

我不知道如何将新项添加到数组的开头，然后始终在表的顶部显示新添加的项

unshift不适用于此目的，因为它只将第一项添加到开头，然后不再添加

我原以为slice是使用index-的方法，但它也不能满足我的需要

下面是一个示例，下面是代码：

新Vue{ el:应用程序， 数据：{ itemIndex:0， 项目：[ {val:1，姓名：约翰，性别：男}， {val:2，姓名：玛丽亚，性别：女性}， {瓦尔：3，姓名：阿诺德，性别：男}， ] }, 方法：{ testPush{ this.items.push{val:456，name:Peter，sex:male} }, testUnshift{ this.items.unshift{val:456，姓名：彼得，性别：男} }, 测试拼接{ 这是指数-； this.items.this.itemIndex，0， {瓦尔：456，姓名：彼得，性别：男} ; } } } 。淡入激活状态。淡入保持激活状态{ 背景色：无； 过渡：所有2； } .淡入淡出淡出淡出{ 背景颜色：绿色； } 推 取消移位 切片到索引-1 指数 价值 名称 性别 {{index}} {{item.val}} {{item.name} {{item.sex} 问题是因为：key=item.val 在

添加此项。$forceUpdate；取消换档后

新Vue{ el:应用程序， 数据：{ itemIndex:0， 项目：[{ 瓦尔：1， 姓名：约翰， 性别:男 }, { 瓦尔：2， 姓名：玛丽亚， 性别：女 }, { 瓦尔：3， 姓名：阿诺德， 性别:男 }, ] }, 方法：{ 测试推送{ 这个。项目。推{ 瓦尔：456， 姓名：彼得， 性别:男 } }, 测试反移位{ 此为.items.unshift{ 瓦尔：456， 姓名：彼得， 性别:男 } 这是最新情况； }, 测试拼接{ 这是指数-； this.items.this.itemIndex，0{ 瓦尔：456， 姓名：彼得， 性别:男 }; } } } .淡入激活状态， .淡入淡出激活状态{ 背景色：无； 过渡：所有2； } .淡入， .淡出{ 背景颜色：绿色； } 推 取消移位 切片到索引-1 指数 价值 名称 性别 {{index}} {{item.val}} {{item.name} {{item.sex}

---

在代码中：错误：[Vue warn]：检测到重复的密钥：“456”。这可能会导致更新错误。unshift不适用于此目的，因为它只将第一项添加到开头，然后不再添加。。但是取消移动总是将新项目放在顶部。您想要的输出是什么？我已经添加了一个答案。如果我使用索引作为键，那么表行高亮显示将不起作用。我需要在顶部突出显示新添加的项。：key=item.val不是唯一的，您是否检查了控制台输出，您将始终收到错误谢谢您共享此解决方案。我在一个带有行和单选按钮的表上实现了这个功能。选定的值将显示在顶部。

<tr 
          v-for="(item, index) in items"
          :key="item.val"
          >

<tr 
          v-for="(item, index) in items"
          :key="index + '|' + item.val"
          >