过滤数组的问题，当尝试通过搜索和 Vuejs 中的下拉列表过滤数据时？答案

【问题标题】：Problem with filtering array, When trying to filter data with search and from dropdown in Vuejs?过滤数组的问题，当尝试通过搜索和 Vuejs 中的下拉列表过滤数据时？
【发布时间】：2021-12-07 05:00:16
【问题描述】：

<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>

最初将完全加载用户数据。后来基于两个过滤器，即一个用于搜索过滤器，我应该从所有用户数组中过滤出数组。第二个，对于基于用户数组中的状态的下拉，我需要过滤数组。

如何更改我的代码以使其正常工作。目前它没有从搜索或下拉列表中过滤数组。但只是显示数据。

【问题讨论】：

您是为拥有许多用户和多种设备的生产应用程序构建它，还是这是一个爱好项目？
不，我只是在学习 vuejs 和练习。

标签： javascript vue.js

【解决方案1】：

要使此示例正常运行，需要进行多项更改。

首先，您需要更新所显示的内容。而不是你现在拥有的列表，我建议只打印出变量sourceInfo，它将包含过滤后的列表。因此，在 HTML 部分中添加某处

{{ sourceInfo }}

在此更改之后，您应该已经在控制台中收到一条错误消息，因为 sourceInfo 的内容现在正在使用中，因此最终被评估了。消息四处流传：

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

因此，您需要将this.userList 更改为this.users，这是一个实际变量，包含用户列表：

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

又弹出一个错误：

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

这个来自于在boolean 上应用sort() 函数，预计将由includes() 函数返回。因此，作为最后一步，删除过滤器中检查用户是否匹配文本搜索条件的sort() 部分，并在返回结果之前应用它：

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

...

return res.sort(compare);

基本功能现在应该可以工作了。在检查下拉列表的过滤器时，您可能会注意到对于 nok，即使一个用户具有相应的状态，也会返回一个空数组。这是因为下拉元素nok 具有分配的值notok。因此，只需将值更改为 nok 即可。

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

这是运行代码的代码框的链接：https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue

【讨论】：