在 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

#