vue3 component list 中 input 内容错误的问题？

Question

这是问题的一个动图。

这是问题的现场 https://play.vuejs.org/#eNp9VE2Pm0AM/SsWl5CWJR9HSqKuVFWqVKlVK...

问题描述：
当有两行时，在第一行后插入一行，input 的内容却保持位置不变，如何修复这个问题？
比如这个例子，当 input 内的内容依次是 1、2 时，我再在第一行后插入一行，我期望的是，第一个 input = 1，第二个 input = 空，第三个 input = 2，但事实却不是。

Answer 1

index不唯一，参考下面的看看：

<script setup>
import { ref } from 'vue'
import Item from './item.vue'

const list = ref([])
list.value.push({
  id: 1,
  title: 'First',
  number: 0
})

let nextId = 2

const add = (index) => {
  let sec = new Date().getSeconds()
  list.value.splice(index + 1, 0, {
    id: nextId++,
    title: sec,
    number: 0
  })
}

const remove = (index) => {
  list.value.splice(index, 1)
}
</script>

<template>
  <h1>List</h1>
  <template v-for="(item, index) in list">
    <div class="item">
      <item :todo="item" :key="item.id"></item>
      <div class="action">
        <button @click="add(index)">
          Add
        </button>
        <button @click="remove(index)">
          Remove
        </button>
      </div>
    </div>
  </template>
  
  <hr>
  
  {{list}}
</template>

<style>
  .item{
    display: flex;
    min-width: 120px;
  }
</style>

Answer 2

把 key 和 for 放同级 ; 并且key用唯一值 item.title