Quiero incluir la barra de búsqueda en vue.js. Soy bastante nuevo en vue. Necesito filtrar datos en el front-end. ¿Cómo filtro los datos cuando los obtengo en la sección de secuencias de comandos?
Aquí está mi código:
<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>Una forma sencilla de hacer esto en vue sería usar una propiedad calculada que filtre automáticamente sus productos cuando cambie el texto de búsqueda.
p.ej:
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>Una forma de buscar:
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>