搜索栏 vue.js答案

【问题标题】：Search bar vue.js搜索栏 vue.js
【发布时间】：2021-11-16 03:12:41
【问题描述】：

我想在 vue.js 中包含搜索栏。我对vue很陌生。我需要在前端过滤数据。在脚本部分获取数据时如何过滤数据。

这是我的代码：

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

【问题讨论】：

您能否添加一些有关如何获取数据等的详细信息？
api laravel vue
这能回答你的问题吗？ Vuejs Search filter
没有。我已经看过了。但我的数据来自一个 api。作为一个数组
最好传递search，以及任何其他参数，如排序、排序方向、页码，然后在数据库查询中进行过滤。如果您进行客户端过滤，那么一旦你有几百个产品，你的 API 和 UI 就会变慢

标签： javascript html vue.js

【解决方案1】：

在 vue 中执行此操作的一种简单方法是使用 computed property，它会在搜索文本更改时自动过滤您的产品。

例如：

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>

【讨论】：

谢谢你，伟大的人类！

【解决方案2】：

一种搜索方式：

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>

【讨论】：