const app = new Vue({ el: '#app', data: { search: '', itemsList: [], isLoaded: false, selectNum: status, userList: [{ id: 1, name: "Prem", status: "ok" }, { id: 2, name: "Chandu", status: "notok" }, { id: 3, name: "Shravya", status: "ok" }, { id: 4, name: "kirt", status: "notok" } ] }, created() { vm.itemsList = []; vm.isLoaded = true; }, computed: { filteredAndSorted() { // function to compare names function compare(a, b) { if (a.name < b.name) return -1; if (a.name > b.name) return 1; return 0; } return this.userList.filter(user => { return user.name.toLowerCase().includes(this.search.toLowerCase()) && user.status === this.selectNum }).sort(compare) } } }) <div id="app"> <div v-if="isLoaded"> <select v-model="selectNum" name="text"> <option :value="status">ok</option> <option :value="status">notok</option> </select> </div> <div class="search-wrapper"> <input type="text" v-model="search" placeholder="Search title.." /> <label>Search Users:</label> </div> <ul> <li v-for="user in filteredAndSorted">{{user.name}}</li> </ul> </div>Estoy tratando de lograr una funcionalidad como,
Inicialmente, la matriz se cargará con la ayuda de v-for. En la parte superior tengo dos opciones llamadas barra de búsqueda y menú desplegable. Donde Con la ayuda de aquellos, estoy tratando de llenar la matriz.
Donde con la barra de búsqueda, quiero filtrar los valores de la matriz. Con el menú desplegable, quiero filtrar el estado presente en cada matriz.
El código es un error en la línea 25
// ... created(){ var vm = this; vm.itemsList = []; // => j is undefined vm.isLoaded = true; }, // ...intente como el siguiente fragmento:
const app = new Vue ({ el: '#app', data() { return { search: '', itemsList: [], isLoaded: false, selectNum: '', userList: [ { id: 1, name: "Prem", status:"ok" }, { id: 2, name: "Chandu", status:"notok" }, { id: 3, name: "Shravya", status:"ok" }, { id: 4, name: "kirt", status:"notok" } ] } }, created(){ this.isLoaded = true; }, computed: { filteredAndSorted(){ function compare(a, b) { if (a.name < b.name) return -1; if (a.name > b.name) return 1; return 0; } const res = this.userList.filter(user => { return user.name.toLowerCase().includes(this.search.toLowerCase()) }).sort(compare) if (this.selectNum) { return res.filter(user => user.status === this.selectNum ) } return res } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-if="isLoaded"> <select v-model="selectNum" name="text"> <option value="" selected="selected">Select status</option> <option value="ok">ok</option> <option value="notok">notok</option> </select> </div> <div class="search-wrapper"> <input type="text" v-model="search" placeholder="Search title.."/> <label>Search Users:</label> </div> <ul> <li v-for="user in filteredAndSorted">{{user.name}}</li> </ul> </div>