qselect error after update options
-
hi! i have a long list of clients, that i want to filter autocomplete style. i am having problems when for example filter a term and then deleting the last letter. the options property is refresh correclty, but the option list size keeps the last value. seems that i need to trigger some refresh of the list or something.
example:
filter “asd” : 4 rows, 4 options shown.
then filter “as” deleting de last letter, 10 rows from api, but only 4 options are shownthks!
data() { return { step: 1, modo: "custom", cliente: null, clientes: [] }; }, methods: { filtrarClientes(val, update, abort) { update(async () => { const term = val.toLocaleLowerCase(); let clientes = await this.$store.dispatch("general/getClientes", { term: term }); this.clientes = clientes.data.map(opt => ({ label: opt.razonSocial, value: opt })); }); }, },
<q-select v-model="cliente" :options="clientes" label="Cliente" clearable use-input @filter="filtrarClientes" map-options style="width: 250px; padding-bottom: 32px" > <template v-slot:no-option> <q-item> <q-item-section class="text-grey"> No results </q-item-section> </q-item> </template> </q-select>
-
@Andrewww Try and await for the result before calling update. Something like
methods: { async filtrarClientes(val, update, abort) { const term = val.toLocaleLowerCase(); let clientes = await this.$store.dispatch("general/getClientes", { term: term }); update(() => { this.clientes = clientes.data.map(opt => ({ label: opt.razonSocial, value: opt })); }); }, },
-
@turigeza works perfectly! thanks