<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>Inicialmente, los datos del usuario se cargarán por completo. Más tarde, en función de dos filtros, es decir, uno para el filtro de búsqueda, debo filtrar la matriz de todas las matrices de usuarios. el segundo, para el menú desplegable según el estado en la matriz de usuarios, necesito filtrar la matriz.
¿Cómo hago cambios en mi código para que funcione correctamente? en la actualidad, no está filtrando la matriz ni desde la búsqueda ni desde el menú desplegable. Pero solo mostrando los datos.
Se requieren varios cambios para que este ejemplo funcione.
Primero, necesita actualizar lo que está mostrando. En lugar de la lista que tiene ahora, le sugiero que imprima la variable sourceInfo , que contendrá la lista filtrada. Por lo tanto, agregue algún lugar a la parte HTML
{{ sourceInfo }} Después de este cambio, ya debería recibir un mensaje de error en la consola, porque el contenido de sourceInfo ahora está en uso y, por lo tanto, finalmente se evalúa. El mensaje va algo por ahí:
[Vue warn]: Error in render: "TypeError: this.userList is undefined" Por lo tanto, debe cambiar this.userList a this.users que es una variable real y contiene la lista de usuarios:
const res = this.users.filter((user) => ...Y aparece otro error:
[Vue warn]: Error in render: "TypeError: user.name.toLowerCase().includes(...).sort is not a function" Este proviene de aplicar la función sort() en un boolean , que se espera que sea devuelto por la función includes() . Por lo tanto, como último paso, elimine la parte sort() del filtro que verifica que el usuario coincida con los criterios de búsqueda de texto y aplíquelo antes de devolver el resultado:
const res = this.users.filter((user) => { return user.name.toLowerCase().includes(this.search.toLowerCase()); }); ... return res.sort(compare); La funcionalidad básica debería funcionar ahora. Al revisar sus filtros del menú desplegable, puede notar que para nok se devuelve una matriz vacía aunque un usuario tenga el estado correspondiente. Esto se debe al hecho de que el elemento desplegable nok tiene asignado el valor notok . Por lo tanto, simplemente cambiando el valor a nok , está listo para comenzar.
<option value="nok">nok</option>Aquí está el enlace a un codesandbox del código en ejecución: https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue