Vue.js 为什么Vue渲染组件不正确？

下面是一个错误示例

重现问题：添加3项并删除第二项

里面的所有内容都已正确删除。这可以从下面文本的呈现中看出。但组件显示不正确。为什么？这是虫子吗

我尝试使用附加属性进行条件渲染，尝试覆盖对元素数组和数组内部的引用-没有结果

Vue.component（'selected-material'{
道具：[
“价值”
],
模板：`
`,
数据（）{
返回{
本地：这个值，
材料：[{
id:1，
名称：“mat-1”，
q:1
},
{
id:2，
名称：“mat-2”，
q:1
},
],
};
},
方法：{
输入（）{
this.$emit（'input'，this.local）；
},
},
})
Vue.组件（“附加板”{
道具：[
“价值”
],
模板：`
mdi plus
减mdi
`,
数据（）{
返回{
本地：这个值，
};
},
方法：{
输入（）{
this.$emit（'input'，this.local）；
},
附加（）{
此.$emit（'append'）；
},
删除（）{
this.emit（'remove'，this.local.id）；
},
},
})
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
数据（）{
返回{
董事会：[]，
};
},
安装的（）{
this.append（）；
},
方法：{
附加（）{
这是推({
id:Date.now（），
材料：{
id:1，
名称：“mat-1”，
q:1
},
});
},
删除（id）{
if（this.boards.length！==1）{
const index=this.boards.findIndex（board=>board.id==id）；
这是电路板拼接（索引1）；
}
},
},
})

{{board.id}}{{board.material.q}}

从

v-for

列表中删除项目时，如果不希望重复使用DOM，则使用每个项目特有的

键非常重要。如果使用
索引
并删除一个项目，则下一个项目将获取其索引，因此Vue将重用已删除项目的DOM

使用
id
作为键，因为它似乎是唯一的：



另外，检查
上的
v型
，您可能希望它使用
local.material.q
而不是
local.q
：


谢谢。它在代码段中工作，但在我的项目中的组件中，它更重，vue崩溃。不要更改子组件中的id！）