<template>
<div id="app">
<span v-if="isLoaded" class="select">
<select v-model="selectNum" name="text">
<option value="" selected="selected">status</option>
<option value="ok">ok</option>
<option value="notok">notok</option>
<option value="medium">medium</option>
</select>
</span>
<span class="search-wrapper">
<span class="bar">
<input
type="text"
v-model="search"
placeholder="filter"
class="s-bar"
/>
</span>
</span>
<div v-for="user in users" :key="user.id">
{{ user.name }}
<div v-for="list in lists" :key="list.id">
{{ list.pan }}
</div>
</div>
</div>
</template>
<script>
import { userdata } from "../assets/userdata";
import { listdata } from "../assets/listdata";
export default {
name: "HelloWorld",
data: function () {
return {
users: userdata,
lists: listdata,
search: "",
isLoaded: false,
selectNum: "",
};
},
created() {
this.isLoaded = true;
},
computed: {
sourceInfo() {
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>
Initially, user data will be fully loaded. Later based on two filters i.e. one for search filter I should filter out the array from all users array. Second, for the dropdown based on the status in the users array, I need to filter the array.
How to change the code to work properly. Currently, it does not filter arrays from searches or dropdowns. But it just displays the data.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
There are several changes required for this example to work properly.
First, you need to update the displayed content. I recommend printing the variable
sourceInfoinstead of the list you have now, which will contain the filtered list. So in the HTML section add somewhere{{ sourceInfo }}After making this change, you should already receive an error message in the console because the contents of
sourceInfoare now being used and therefore are ultimately evaluated. The content of the message is as follows:So you need to change
this.userListtothis.users, which is an actual variable containing the list of users:Another error pops up:
This comes from applying the
sort()function on thebooleanwhich is expected to be returned by theincludes()function. So as a final step, remove thesort()part of the filter that checks if the user matches the text search criteria and applies it before returning the results:const res = this.users.filter((user) => { return user.name.toLowerCase().includes(this.search.toLowerCase()); }); ... return res.sort(compare);Basic functionality should now work. When checking the dropdown's filters, you may notice that for
nok, an empty array is returned even if one user has the corresponding status. This is because the dropdown elementnokhas been assigned the valuenotok. So just change the value tonok.Here is the link to codesandbox that runs the code: https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue