Tengo una aplicación Vue2, en una de las páginas tengo un par de tablas de datos. Cada tabla está detrás de una pestaña, lo que permite a los usuarios seleccionar la que deseen. Lo que no está detrás de una pestaña es la barra de búsqueda, que mantuve separada para evitar duplicarla con el código. Sin embargo, lo necesito para poder filtrar/buscar a través de cualquiera de las tablas que se están viendo.
Funciona perfectamente bien cuando trato de filtrar a través de uno u otro, pero debido a que no puedo vincular múltiples valores en una directiva de modelo v, no estoy seguro de qué se puede hacer para lograr lo que necesito. A continuación se muestra el código correspondiente. Cualquier orientación sería muy apreciada.
Barra de búsqueda
<div class="container-fluid search-bar"> <v-row no-gutters> <v-col cols="12" md="5" sm="12" class="text-left"> <v-text-field type="text" class="form-control bg-white search-input" placeholder="SEARCH CONTENT BY NAME OR KEYWORD" v-model="serviceKeyword" /> </v-col> <v-col cols="12" md="7" sm="12"> </v-col> </v-row> </div>Script para manejar la búsqueda
Nota: esto está dentro del script. Cada uno está diseñado para la tabla específica que mira. Sin embargo, si lo hago, solo puedo hacer que la búsqueda funcione si llamo a serviceKeyword o resourceKeyword
computed: { filteredServiceDirectories() { if (!this.serviceKeyword) { return this.serviceDirectories; } var searchBy = this.serviceKeyword.toLowerCase(); return this.serviceDirectories.filter( (q) => q.name.toLowerCase().indexOf(searchBy) !== -1 || (q.organization && q.organization.name.toLowerCase().indexOf(searchBy) !== -1) || (q.categories && q.categories.some( (c) => c.name.toLowerCase().indexOf(searchBy) !== -1 )) ); }, filteredResourceDirectories() { if (!this.resourceKeyword) { return this.resourceDirectories; } var resourceSearchBy = this.resourceKeyword.toLowerCase(); return this.resourceDirectories.filter( (q) => q.name.toLowerCase().indexOf(resourceSearchBy) !== -1 || (q.organization && q.organization.name.toLowerCase().indexOf(resourceSearchBy) !== -1) || (q.resourceType && q.resourceType.value.toLowerCase().indexOf(resourceSearchBy) !== -1) ); }, },Hay pocas maneras de resolver esto. Uno es simplemente buscar/filtrar ambos al mismo tiempo.
Puede cambiar resourceKeyword y serviceKeyword a simplemente keyword , vincularla a la entrada y usarla para filtrar tanto resourceDirectores como serviceDirectories .
Solo se ve una tabla/pestaña a la vez, por lo que realmente no importa, ¿o estoy malinterpretando?
Si desea una lista completa al cambiar de tabla, puede agregar @click="keyword === '' en la pestaña.
Aquí hay un ejemplo de código que hice para filtrar dos matrices en función de una palabra clave: https://codepen.io/bergur-the-encoder/pen/ExwBZMj
Otra solución es agregar un @click en la pestaña para establecer/decir al script lo que está viendo, así que @click="activeTab=resourceDirectores" y @click="activeTab=serviceDirectores"
Cambie a v-model="keyword como antes, pero en su propiedad calculada verifique la propiedad de datos activeTab
computed: filteredServiceDirectories() { if (activeTab === 'resourceDirectives') { return this.serviceDirectories // should not filter those } ...//rest of codey luego lo mismo (u opuesto) para filteredResourceDirectories