[Vuejs]-How to filter array of objects when something is searched?

0👍

You can reference to codes below:

<template>
<div><input v-model="searchKeywords"/></div>
<table >
    <tr v-for="(item, index) in (searchKeywords.length>0?searchResultArr:sellbill)">
            <td>
                <input type="text" v-if="item.edit === true" v-model="item.customers">
                <p v-else>{{item.customers}}</p>
            </td>
            <td>
                <input type="text" v-if="item.edit === true" v-model="item.productName">
                <p v-else>{{item.productName}}</p>
            </td>
            <td>
                <input type="number" v-if="item.edit === true" v-model="item.price">
                <p v-else>{{item.price}}</p>
            </td>
            <td>
                <button @click="remove(index)">delete</button>

                <button v-if="item.edit === false" @click="item.edit = true">edit</button>
                <button v-else @click="item.edit = false">submit</button>
            </td>
        </tr>
</table>
</template>
<script>
export default {
  data:{
     sellbill:[],
     searchKeywords:'',
  },
computed:{
  searchResultArr(){
    if(this.searchKeywords.length>0){
      return this.sellbill.filter(e=>(e.customers.includes(this.searchKeywords) || e.productName.includes(this.searchKeywords)))
    }else{
      return []
    }
  }
}
}
</script>

Leave a comment