Beim Filtern von Arrays mithilfe von Such- und Dropdown-Menüs in Vuejs sind Probleme aufgetreten

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>

Zunächst werden die Benutzerdaten vollständig geladen. Später sollte ich basierend auf zwei Filtern, d. h. einem für den Suchfilter, das Array aus dem Array „Alle Benutzer“ herausfiltern. Zweitens muss ich für das Dropdown-Menü, das auf dem Status im Benutzerarray basiert, das Array filtern.

So ändern Sie den Code, damit er ordnungsgemäß funktioniert. Derzeit werden keine Arrays aus Suchen oder Dropdowns gefiltert. Aber es zeigt nur die Daten an.

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