Search bar vue.js-CodePudding

I want to include search bar in vue.js. I am quite new to vue. I need to filter data on the front end. How do I filter the data when I get it in the script section.

Here is my code:

<template>
  <div>
    <div class="search-wrapper panel-heading col-sm-12">
      <input type="text" v-model="search" placeholder="Search" /> <br />
      <br />
    </div>
    <table class="table" id="myTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.quantity }}</td>
          <td>{{ product.status }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  }
};
</script>

CodePudding user response：

A simple way to do this in vue would be to use a computed property that automatically filters your products when the search text changes.

e.g.:

Vue.createApp({
  data() {
    return {
      products: [
        {id: 1, name: "Foo"},
        {id: 2, name: "Bar"},
        {id: 3, name: "Baz"},
        {id: 4, name: "Foobar"}
      ],
      search: ""
    };
  },
  computed: {
    filteredProducts() {
      return this.products.filter(p => {
        // return true if the product should be visible

        // in this example we just check if the search string
        // is a substring of the product name (case insensitive)
        return p.name.toLowerCase().indexOf(this.search.toLowerCase()) != -1;
      });
    }
  }
}).mount('#app');

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div class="search-wrapper panel-heading col-sm-12">
    <input type="text" v-model="search" placeholder="Search" /> <br> <br>
  </div>  
  <table class="table" id="myTable">
    <thead>
      <tr>
          <th>ID</th>
          <th>Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product in filteredProducts" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
      </tr>
    </tbody>
   </table>
</div>

CodePudding user response：

One way of searching :

Vue.config.productionTip = false
Vue.config.devtools = false
new Vue({
  el: '#demo',
  data() {
    return {
        products: [
          {id: 1, name:'Prod 1', category: 'Cat 1', quantity: 3, status: true},
          {id: 2, name:'Prod 2', category: 'Cat 2', quantity: 5, status: true},
          {id: 3, name:'Prod 3', category: 'Cat 1', quantity: 1, status: false},
          {id: 4, name:'Prod 4', category: 'Cat 3', quantity: 8, status: true},
          {id: 5, name:'Prod 5', category: 'Cat 1', quantity: 0, status: true}
        ],
        search: ''
    }
  },
  computed: {
    searchProd() {
     let se = []
     if(this.search !== '') {
      se = this.products.filter(p => 
        p.name.toLowerCase().includes(this.search.toLowerCase()) ||
        p.category.toLowerCase().includes(this.search.toLowerCase()) ||
        p.quantity === Number(this.search)
      )
     } else {
      se = this.products
     }
     return se
    }
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="search-wrapper panel-heading col-sm-12">
    <input type="text" v-model="search" placeholder="Search" /> <br> <br>
  </div>  
  <table class="table" id="myTable">
      <thead>
      <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Category</th>
          <th>Quantity</th>
          <th>Status</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="product in searchProd" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.category }}</td>
          <td>{{ product.quantity }}</td>
          <td>{{ product.status }}</td>
      </tr>
      </tbody>
  </table>
</div>