vue 列表 数据复用问题

需求：切换不同的radio，展示不同的时间选择框。
如下所示：按星期这个radio，有开始时间和结束时间这两个选择器；按时刻这个radio，也有开始时间和结束时间这两个选择器，且都是通过数组遍历来渲染出来的( addTimeList1:[{ id: 0 }]和 addTimeList2:[{ id: 0 }])。当在按星期这个radio中输入时间，切换到按时刻这个radio时，刚才输入的时间也会显示到该radio中的时间选择器里面。
原因：由于id重复造成了数据复用。因为 addTimeList1和addTimeList2数组中的id都是从0开始的,造成了:key="item.id"对应的key都是一样的。
解决办法：将addTimeList1:[{ id: 0 }]、 addTimeList2:[{ id: 0 }])改成addTimeList1:[{ id: 200 }]、addTimeList2:[{ id: 1000 }]，使id不会有重复即可。

<div v-if="useDateType==2" class="margin_fill" style="height:32px;" v-for="(item,index) in addTimeList2" :key="item.id">
</div>

<div v-if="useDateType==3" class="margin_fill" style="height:32px;" v-for="(item,index) in addTimeList3" :key="item.id">
</div>

  addTimeList2:[{ id: 1000 }],

image.png image.png

vue 列表 删除操作总是删除最后一条数据的解决办法