Vue.js Vuejs基于searchkey添加动态表行

您好，我是vuejs新手，刚刚了解了基本概念，有人能帮我编写基于searchKey的addItems方法（或提供类似的资源）并单击项添加到表行中，以及removeitem方法，我在此表示衷心的感谢

const vueApp=新的Vue({
el:“#myApp”，
数据：{
商品：['苹果'，'香蕉'，'橘子']，
搜索键：“”，
行项目：[]
},
方法：{
searchItem:function（）{
},
addItems:function（）{
},
removitems:function（）{
}
}
});

---

要完成任务，您需要

1）可供选择的项目列表

2）缩小前一个列表范围的搜索词

3）您选择的项目列表

select

功能必须对2项进行操作

remove

功能必须对3

一个可能的简单实现如下所示

newvue({
el:“应用程序”，
数据：{
搜索词：“”，
搜索项目：[“苹果”、“香蕉”]，
选定：[]
},
方法：{
选择（项目）{
此.已选.推送（项目）；
}
},
计算：{
selectedItems（）{
返回此.selected.join（“，”）
},
匹配项（）{
如果（！this.searchTerm）返回；
返回this.searchItems.filter（sI=>sI.includes（this.searchTerm））；
}
}
})

这将为你指明前进的方向

---

这是我忘了谢谢你的电话，伙计。非常感谢你的帮助：）@MilonHossain也许，你也可以接受答案；）