Problèmes rencontrés lors du filtrage des tableaux à l'aide des menus de recherche et déroulants dans 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>

Initialement, les données utilisateur seront entièrement chargées. Plus tard, sur la base de deux filtres, c'est-à-dire un pour le filtre de recherche, je devrais filtrer le tableau de tous les tableaux d'utilisateurs. Deuxièmement, pour la liste déroulante basée sur l'état dans le tableau des utilisateurs, je dois filtrer le tableau.

Comment changer le code pour qu'il fonctionne correctement. Actuellement, il ne filtre pas les tableaux des recherches ou des listes déroulantes. Mais il affiche simplement les données.

Answer 1

Plusieurs modifications sont nécessaires pour que cet exemple fonctionne.

Tout d'abord, vous devez mettre à jour le contenu affiché. Je recommande d'imprimer la variable sourceInfo au lieu de la liste que vous avez actuellement, qui contiendra la liste filtrée. Donc dans la section HTML ajoutez quelque part

{{ sourceInfo }}

Après avoir effectué cette modification, vous devriez avoir reçu un message d'erreur dans la console car le contenu de sourceInfo est maintenant utilisé et est donc enfin évalué. Le contenu du message est le suivant :

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

Il faut donc changer this.userList 更改为 this.users qui est une véritable variable contenant la liste des utilisateurs :

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

Une autre erreur apparaît :

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

Cela vient de la section boolean 上应用 sort() 函数，该函数预计由 includes() 函数返回。因此，作为最后一步，删除过滤器的 sort(), qui vérifie si l'utilisateur correspond aux critères de recherche de texte et l'applique avant de renvoyer les résultats :

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

...

return res.sort(compare);

La fonctionnalité de base devrait maintenant fonctionner. En vérifiant la liste déroulante des filtres, vous remarquerez peut-être cela pour nok，即使一个用户具有相应的状态，也会返回一个空数组。这是因为下拉元素 nok 已分配值 notok 。因此，只需将值更改为 nok .

nok

Voici le lien vers codesandbox exécutant le code : https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue