No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    qselect error after update options

    Help
    2
    3
    747
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • A
      Andrewww last edited by

      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>
      
      1 Reply Last reply Reply Quote 0
      • T
        turigeza last edited by turigeza

        @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
                }));
              });
            },
        
          },
        
        A 1 Reply Last reply Reply Quote 0
        • A
          Andrewww @turigeza last edited by

          @turigeza works perfectly! thanks

          1 Reply Last reply Reply Quote 1
          • First post
            Last post