Problem with filtering array, When trying to filter data with search and from dropdown in Vuejs?

Solution 1:

There are multiple changes required to make this example functioning.

First, you need to update what you are displaying. Instead of the list that you have now, I suggest to just print out the variable sourceInfo, which will contain the filtered list. Therefore, add somewhere to the HTML part

{{ sourceInfo }}

After this change, you should already get an error message in the console, because the content of sourceInfo is now in use and thus, finally evaluated. The message goes something around:

[Vue warn]: Error in render: "TypeError: this.userList is undefined"

So, you need to change this.userList to this.users which is an actual variable and contains the list of users:

const res = this.users.filter((user) => ...

And another error pops up:

[Vue warn]: Error in render: "TypeError: user.name.toLowerCase().includes(...).sort is not a function"

This one comes from applying the sort() function on a boolean, which is expected to be returned by the includes() function. Thus, as a last step, remove the sort() part of the filter which checks that the user matches the text search criteria, and apply it before returning the result:

const res = this.users.filter((user) => {
  return user.name.toLowerCase().includes(this.search.toLowerCase());
});

...

return res.sort(compare);

The basic functionality should work by now. When checking your filters of the dropdown, you might notice that for nok an empty array is returned even though one user has the corresponding status. This comes from the fact, that the dropdown element nok has the value notok assigned. Therefore, by simply changing the value to nok you're good to go.

<option value="nok">nok</option>

Here is the link to a codesandbox of the running code: https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue