<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
}
}
})From multiple v-for, I want to display data initially, later I have two filters where one is for filtering array and second one is for, selecting particular array from dropdown, for all of them I have written some logic, But I not sure how to combine my looping logic in filters, so that it work accordingly?
This is my code link :- https://codepen.io/dhanunjayt/pen/vYeeorm
You don't need to create another array to store search results. Vuejs provided computed property for that.
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()
);
}
}
});
If i understand your question correcttly.Try this:
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
}