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 shown

    thks!

      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


Log in to reply