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>
I am trying to achieve functionality like,
Initially the array will be loaded with the help of v-for. At the top I have two options called search-bar and dropdown. Where With the help of those I am trying to filler the array.
Where with search-bar, I want to filter array values. With dropdown, I want to filter the status present in each array.
Advertisement
Answer
try like following snippet:
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>