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 working on implementing a feature,
Initially, the array will be populated using v-for. At the top, there are two options, a search bar and a dropdown. With these options, I aim to filter the array.
The search bar is meant to filter the array values. The dropdown is used to filter the status of each element in the array.