Javascript 具有筛选列表的多个下拉Vue组件

我已经为选择下拉列表创建了一个组件。我的要求是在按下AddRow按钮并删除所选组件时添加更多这些组件。我可以在按下“添加行”按钮时添加此组件

我对它们的价值感到困惑。例如，假设有四个选项[‘奥迪’、‘宝马’、‘沃尔沃’、‘特斯拉’]。当用户从中选择任何值时，如audi，然后按Add row按钮

新的下拉列表组件仅显示3个值['bmw'、'volvo'、'tesla']，现在他们选择了bmw并按下add row。我的问题是当用户再次从第一个/上一个下拉组件中选择值时-应该只有['audi'、'volvo'、'tesla']，不包括宝马。我怎样才能做到这一点

我已经创建了一个存储所有其他数组选项的数组。稍后当我连接到API时，我将创建一个对象数组

请让我知道。谢谢

从./components/DropDowns.vue导入下拉列表； 导出默认值{ 名称:app,， 资料{ 返回{ 默认行：1， 所有列表：[[奥迪、沃尔沃、mec、丰田]]， selectedValue： }; }, 组成部分：{ 下拉列表 }, 计算：{ 禁用{ 返回this.defaultRow===this.lists.length？true:false； } }, 方法：{ 阿德罗{ 如果此.defaultRow<4{ console.log'selectedValue'，this.selectedValue 如果这是.selectedValue{ this.allLists.pushthis.allLists[this.defaultRow-1].filterl=>l！==this.selectedValue； console.logTCL:addRow->this.lists，this.allLists； } } }, OnDropDownSelected{ this.selectedValue=selected； console.log TCL:onDropDownSelect->this.selectedValue， 这是selectedValue ; } } }; 应用程序{ 字体系列：Avenir、Helvetica、Arial、无衬线字体； -webkit字体平滑：抗锯齿； -moz osx字体平滑：灰度； 文本对齐：居中； 颜色：2c3e50； 边缘顶部：60像素； } 下拉组件：

请选择一个 {{list.name} {{selected}} 添加行 删除行 导出默认值{ 道具：['lists'，'otherList']， 资料{ 返回{ 所选：{} } }, 方法：{ getValue{ this.$emit'dropDownSelect'，this.selected }, 阿德罗{ console.logthis.selected this.$emit'addRow'，this.selected //this.otherList.pushthis.selected； //console.logTCL:addRow->this.otherList，this.otherList }, 拆卸器{ 此.$emit'removeRow'，此.selected //console.log'selected value'，this.selected； //this.otherList=this.otherList.filterol=>ol！==this.selected； //console.logTCL:removeow->this.otherList，this.otherList } } };

---

现在，一旦用户从select中选择值。他们只能看到该值。

您确定代码正确吗？有许多错误：1-：lists=alllist[i]应该是：lists=alllist[i]。2-在父组件中未声明otherList.typo错误。我在尝试一些东西。忘了把它改回来像这样用v是错误的-你需要用n，给他一个有意义的名字。您有一个所有汽车的列表，您将创建另一个未选择汽车的列表。你们将在德鲁帕敦展示。或者像这样创建一个对象：alllist:[{car:audi，isInDrop:false}，{car:volvo，isInDrop:false}，{car:mec，isInDrop:false}，{car:toyota，isInDrop:false}]