CODEWITHSUNDEEP
vue.jsvuejs2
Milon Hossain
Milon Hossain

Reputation: 41

Vuejs add dynamic table row based on searchkey

Hello i'm new to vuejs just got the basic ideas, can somebody help me on this regard writing the addItems method (or provide similar resource) based on searchKey and click on item to add into table row, as well as the removeitem method, my humble thanks in advance .

<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>

Upvotes: 1

Views: 142

Answers (1)

Thomas Junk
Thomas Junk

Reputation: 5676

To accomplish your task, you need

1) a list of possible items to select

2) a search term to narrow down the former list

3) a list of items you selected

The select function has to operate on the items of 2.

The remove function has to operate on the items of 3

A possible naive implementation looks like

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));
    }
  }
})

This should point you in the direction to go.

Here is the Fiddle

Upvotes: 1

Related Questions