在 Vuejs 中使用搜索和下拉菜单过滤数组时遇到的问题

Question

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

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

如何更改代码才能正常工作。目前，它不会从搜索或下拉列表中过滤数组。但只是显示数据。

Answer 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 即可。

nok

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