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>
我想实现的功能是,
初始情况下,数组将通过v-for加载。 在顶部我有两个选项:搜索栏和下拉框。通过它们的帮助,我试图过滤数组。
使用搜索栏,我想要过滤数组的值。 使用下拉框,我想要过滤每个数组中存在的状态。