<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 userList"></li> <li v-for="manage in manageList"></li> </ul> </div> const app = new Vue ({ el: '#app', data: { 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" } ], manageList: [ { id: 1, name: "cc", status:"ok" }, { id: 2, name: "aa", status:"notok" }, { id: 3, name: "a", status:"ok" }, { id: 4, name: "vv", 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 } } })De múltiples v-for, quiero mostrar datos inicialmente, luego tengo dos filtros donde uno es para filtrar la matriz y el segundo es para seleccionar una matriz particular del menú desplegable, para todos ellos he escrito algo de lógica, pero no estoy seguro ¿Cómo combinar mi lógica de bucle en filtros para que funcione en consecuencia?
Este es mi enlace de código: - https://codepen.io/dhanunjayt/pen/vYeeorm
No necesita crear otra matriz para almacenar los resultados de la búsqueda. Vuejs proporcionó propiedad computada para eso.
HTML
<div id="app"> <div v-if="isLoaded"> <select v-model="selectNum" name="text"> <!-- HERE --> <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> <span>Search Results</span> <ul> <li v-for="user in search_results">Name:{{user.name}} and Status:{{user.status}}</li> </ul> <span>All Users</span> <ul> <li v-for="user in userList">Name:{{user.name}} and Status:{{user.status}}</li> </ul> </div>JS
const app = new Vue({ el: "#app", data: { search: "", 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" } ], manageList: [ { id: 1, name: "cc", status: "ok" }, { id: 2, name: "aa", status: "notok" }, { id: 3, name: "a", status: "ok" }, { id: 4, name: "vv", status: "notok" } ] }, created() { this.isLoaded = true; }, computed: { search_results: function () { let that = this; if (that.search.length == 0 && that.selectNum.length == 0) return; return this.userList.filter( (item) => item.name .toLocaleLowerCase() .indexOf(that.search.toLocaleLowerCase()) >= 0 && item.status.toLocaleLowerCase() == that.selectNum.toLocaleLowerCase() ); } } });Si entiendo su pregunta correctamente, intente esto:
search_results: function () { let filterList = ['userList','manageList'] let resultList = [] let that = this; filterList.forEach(filter => { const result = that[filter].filter((item) => item.name .toLocaleLowerCase() .indexOf(that.search.toLocaleLowerCase()) >= 0 && item.status.toLocaleLowerCase() == that.selectNum.toLocaleLowerCase()) resultList = [...resultList,...result] }) return resultList }