Laravel 在v-for上删除Vuejs组件

我创建了一个Vuejs组件，如下所示：

<product v-for="(detail, index) in details" :key="index" :products="{{ $products }}" :brands="{{ $brands }}" :items="{{ $items }}" @add="addItem" @remove="removeItem(index)">

产品
{{product.name}
烙印
{{brand.name}
项目
{{item.name}
价格
量
成本
导出默认值{
道具：[“产品”、“品牌”、“项目”]，
数据：函数（）{
返回{
我的产品：这个，
我的品牌：这个品牌，
myItems:this.items，
filteredBrand:null，
filteredItem:null
}
},
方法：{
getBrand（e）{
this.filteredBrand=this.myBrands.filter（brand=>brand.product\u id==e.currentTarget.value）；
},
项目（e）{
this.filteredItem=this.myItems.filter（item=>item.brand\u id==e.currentTarget.value）；
}
}
}

并将组件添加到如下页面：

<product v-for="(detail, index) in details" :key="index" :products="{{ $products }}" :brands="{{ $brands }}" :items="{{ $items }}" @add="addItem" @remove="removeItem(index)">

这是我的主页脚本：

var myApp=新的Vue({
el:“#应用程序”，
数据：{
详情：[{}]，
},
方法：{
附加项（）{
this.details.push（{}）；
},
删除项目（索引）{
如果（this.details.length>1）{
本节详细说明拼接（索引1）；
}
},
}
});

一切正常，但

removietem

方法无效

当我单击每个组件实例旁边的移除按钮时，它将移除最后一个，而不是我单击的那个

我不知道是什么问题

这是一个在线示例：

谢谢，但它不起作用。（完全相同的结果）ReaveItId参数索引得到了未定义的小音符，可能无法真正解决您的问题，但必须考虑，当从列表中添加/移除项目时，避免使用索引作为组件的键，因为这会导致意外的行为。相反，如果存在随机ID，则使用唯一键（如详细信息ID）。使用@remove=“removietem（index）”//更新沙盒上的第10行missing@MohamedRaza我错过了那部分，谢谢。但是结果是一样的。您可以通过将此数组存储到localstorage中来完成相同的工作。这可以正常工作

props: ['products', 'brands', 'items', 'index'],

<product v-for="(detail, index) in details" :key="index" :index="index" :products="{{ $products }}" :brands="{{ $brands }}" :items="{{ $items }}" @add="addItem" @remove="removeItem">