lookup field (q-select performance tips)

[luis.gilbert]

Hi,

I am trying to create a basic form in my application.
I need some “lookup” fields such as country, states, etc. Each field might have around 200 records aprox.

If I use q-select, it seems to be a performance hit.
So, I would appreciate if someone could point me in the right direction to avoid this problem.

I’m thinking I should have smaller lookup’s (like top 10 records in each lookup) and when user input in each field, then execute a search function to return small lookup for specific text… Anyway, I don’t knwo hoe to make it work…

Thanks!

[genyded]

QSearch lets you type in something and then execute an async query against it and return the results. You could also use events in QSelect to do pretty much the same thing (debounced asyc). However, 200 records is nothing - esepcially if it’s just key/value pairs. So, it may be where/now you are populating the list or something else.

We have 273 countries in our select and we load them in the created hook of the component. We use Vuex and each of our client has there own ‘tenant’ database so we pass that on every API call. Then we pass an event up to the parent when the country changes. So our CountrySelect would look something like this:

<template lang="html">
  <div>
    <q-field class="relative-position">
      <q-select
        v-show="!visible"
        float-label="Country"
        @change="$emit('input', $event)"
        :value="value"
        :options="countries.map(country => (
          {label: country.name, value: country.id}
        ))"
      >
      </q-select>
      <q-inner-loading :visible="visible">
        <q-spinner-dots size="25px" color="primary"></q-spinner-dots>
      </q-inner-loading>
    </q-field>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'CountrySelect',
  
  },
  data () {
    return {
      visible: true
    }
  },
  methods: {
    setCurrentCountry (val) {
      this.$store.commit('app/setCurrentCountry', val)
    },
    ...mapActions({
      getCountries: 'app/getCountries'
    })
  },
  computed: {
    countries () {
      return this.$store.state.app.countries
    }
  },
  created () {
    this.getCountries('tenant')
      .then(response => {
        this.visible = false
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

<style>
</style>

[luis.gilbert]

Well, my problem is that I’m using 4 q-select with 800 records each (a chart of account company), so it takes an extra 2 seconds just to render the page in my core i7.
I tried a third component component (v-combobox from vuetify) and it’s a lot faster because (I think) it renders the options list progressively whie you scroll down.

Any ideas on how can I “clone” this behaviour?

I prefer not to use vuetify because it needs some CSS customization to work along with Quasar, plus, q-select have better options…