Isu yang dihadapi semasa menapis tatasusunan menggunakan carian dan menu lungsur dalam 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>

Pada mulanya, data pengguna akan dimuatkan sepenuhnya. Kemudian berdasarkan dua penapis iaitu satu untuk penapis carian saya harus menapis tatasusunan daripada semua tatasusunan pengguna. Kedua, untuk dropdown berdasarkan status dalam tatasusunan pengguna, saya perlu menapis tatasusunan.

Cara menukar kod untuk berfungsi dengan betul. Pada masa ini, ia tidak menapis tatasusunan daripada carian atau lungsur turun. Tetapi ia hanya memaparkan data.

Answer 1

Terdapat beberapa perubahan yang diperlukan untuk menjadikan contoh ini berfungsi.

Pertama, anda perlu mengemas kini kandungan yang dipaparkan. Saya syorkan mencetak pembolehubah sourceInfo dan bukannya senarai yang anda miliki sekarang, yang akan mengandungi senarai yang ditapis. Jadi di bahagian HTML tambah di suatu tempat

{{ sourceInfo }}

Selepas membuat perubahan ini, anda sepatutnya menerima mesej ralat dalam konsol kerana kandungan sourceInfo kini digunakan dan oleh itu akhirnya dinilai. Kandungan mesej tersebut adalah seperti berikut:

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

Jadi anda perlu menukar this.userList 更改为 this.users yang merupakan pembolehubah sebenar yang mengandungi senarai pengguna:

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

Satu lagi ralat muncul:

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

Ini datang daripada bahagian boolean 上应用 sort() 函数，该函数预计由 includes() 函数返回。因此，作为最后一步，删除过滤器的 sort(), yang menyemak sama ada pengguna sepadan dengan kriteria carian teks dan menggunakannya sebelum mengembalikan keputusan:

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

...

return res.sort(compare);

Kefungsian asas kini sepatutnya berfungsi. Apabila menyemak senarai lungsur turun penapis, anda mungkin perasan bahawa untuk nok，即使一个用户具有相应的状态，也会返回一个空数组。这是因为下拉元素 nok 已分配值 notok 。因此，只需将值更改为 nok .

nok

Berikut ialah pautan ke codesandbox yang menjalankan kod: https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue