Question

您好，我是vuejs的新手，只是有了基本的想法，有人可以在这方面帮助我编写基于searchKey的addItems方法（或提供类似资源），然后单击item以将其添加到表行中，以及removeitem方法，在此先感谢您。

<script type="text/javascript">
      const vueApp = new Vue({
         el: '#myApp',
         data: {
               items: ['apple','banana','orange'],
               searchKey:'',
               rowItems: []
            },
         methods: {
            searchItem: function(){
            },
            addItems: function(){
            },
            removeItems: function(){
            }
         }
      });
</script>

<div id="myApp">

<input type="text" name="search" v-model='searchKey' @click='searchItem'>

<table id="items">
</table>

</div>

Answer 1

要完成任务，您需要

1）可能选择的项目列表

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

3）您选择的项目列表

select功能必须对 2 的项目进行操作。

remove函数必须对 3

的项目进行操作

可能的天真实现看起来像

new Vue({
  el: "#app",
  data: {
    searchTerm: "",
    searchItems: ["apples","bananas"],
    selected: []
  },
  methods: {
    select(item){
        this.selected.push(item);
    }
  },
  computed:{
    selectedItems(){
        return this.selected.join(", ")
    },
    matches(){
      if(!this.searchTerm) return;
        return this.searchItems.filter(sI=>sI.includes(this.searchTerm));
    }
  }
})

这应该为您指明前进的方向。

这里是Fiddle

Vue.js基于SearchKey添加动态表行

1 个答案: