When working with Vue js, searching through a list is straightforward. However, when dealing with a large dataset of 1000 records and needing to apply specific filters for user searches, I find myself at a loss. Is there a plugin or method that can help me achieve this? I've tried searching but haven't found a suitable solution. To illustrate, imagine users who have the statuses "blocked" and "close" need to be filtered in search results. I've attempted to visualize this process, but being new to Vuejs, I would greatly appreciate if someone could provide an example. Thank you in advance.
https://i.stack.imgur.com/Liyrd.gif
const app = new Vue({
el: '#app',
data: {
search: '',
userList: [
{
id: 1,
name: "Prem",
age: 18,
status: "close",
gender: "male",
},
{
id: 2,
name: "Chandu",
status: "close",
age: 20,
gender: "female",
},
{
id: 3,
name: "Shravya",
status: "open",
age: 35,
gender: "female",
},
{
id: 4,
name: "Shravya",
status: "blocked",
age: 35,
gender: "female",
}
]
},
computed: {
filteredAndSorted() {
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())
}).sort(compare)
}
}
});
$(document).ready(function () {
$('.dropdown-submenu a.test').on("click", function (e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filtered
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Name</a></li>
<li><a tabindex="-1" href="#">Age</a></li>
<li><a tabindex="-1" href="#">Gender</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Status <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<input type="checkbox" value="close">
<button>Close</button>
</li>
<li>
<input type="checkbox" value="open">
<button>Open</button>
</li>
<li>
<input type="checkbox" value="blocked">
<button>Blocked</button>
</li>
</ul>
</li>
</ul>
</div>
<div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search title.."/>
</div>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Status</th>
<th>Gender</th>
</tr>
<tr v-for="user in filteredAndSorted">
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.status }}</td>
<td>{{ user.gender }}</td>
</tr>
</table>
</div>