Vue3中链式v-model使用时子组件UI更新异常问题求助

兄弟，我一眼就看出你遇到的问题根源了——你在父组件的v-for循环里用了index作为:key，这正是导致删除子组件时UI显示异常的核心原因！

问题原因解析 #

Vue是通过key来识别列表中每个元素的唯一性的。当你用数组的index作为key时，一旦删除了前面的元素，剩下元素的index会自动往前偏移。这时候Vue会认为“只是元素的位置变了，组件实例可以复用”，于是它会把原来的组件实例重新绑定到新的index对应的数据上，而不是销毁旧组件、创建新组件。

举个例子：你有两个子组件，index分别是0和1。当你删除index=0的组件后，原来index=1的组件会变成index=0。Vue会复用原来index=0的那个组件实例，把它绑定到新的index=0对应的数据上。这就导致视觉上看起来像是删了最后一个组件，但实际上你的数据是正确的，只是UI和组件实例没对应上。

解决步骤 #

1. 给每个子组件项添加唯一标识

修改父组件的addChild方法，给每个child对象添加一个唯一的id（实际项目里可以用uuid库生成更规范的唯一id，这里用Date.now()+Math.random()临时凑一个）：

function addChild() {
  children.value.push({ 
    id: Date.now() + Math.random(), // 生成唯一id
    value: '' 
  });
}

2. 用唯一id作为v-for的key

把父组件模板里的:key从index改成child.id：

<div v-for="(child, index) in children" :key="child.id">
  <Child v-model="child.value" @update:modelValue="updateChildValue(index, $event)" />
  <button @click="removeChild(index)">Remove child</button>
</div>

这样Vue就能准确识别每个子组件的唯一性，删除时会正确销毁对应的组件实例，UI就能和数据保持一致了。

（可选）优化子组件的双向绑定逻辑

另外我注意到你的子组件没有根据传入的modelValue初始化category和foods的值，这会导致父组件如果初始有值的话，子组件的select不会同步。可以给子组件加上初始化逻辑：

// Child.vue
import { ref, watch, defineProps, defineEmits } from 'vue';

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

const category = ref('');
const foods = ref('');

// 监听modelValue变化，同步到子组件的本地状态（初始化也执行）
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    const [cat, food] = newVal.split(' ');
    category.value = cat || '';
    foods.value = food || '';
  }
}, { immediate: true });

// 当选择变化时，emit组合后的值
watch([category, foods], () => {
  emit('update:modelValue', `${category.value} ${foods.value}`.trim());
});

测试验证 #

修改完成后，再尝试删除第一个子组件，你会发现UI和数据终于匹配了——删除哪个，视觉上就会消失哪个，同时父组件输出的数组也会正确更新。

备注：内容来源于stack exchange，提问作者Pithikos