How to put api data value into select options for quasar framework?

Question

---

I am trying to put my api value into q-select but it is showing [object Object] for all the values

<q-select
   v-model="product_brand"
   :options="brands"
   label="Product Brand *"
   lazy-rules
   :rules="[ val => val && val.length > 0 || 'Please select product brand']"
/>

Here is the script code for taking the api values

export default () {
  data () {
    return {
      brands: []
    }
  },
  created () {
   this.$axios.get(['http://127.0.0.1:8000/api/lailen-inventory/categories'])
    .then(res => {
      this.brands = res.data.categories
    })
    .catch(errors => {
      console.log(errors)
    })
  },
}

Answer 1

for example if brands array is like

brands = [{label : "A", id : 1},{label : "B", id : 2}] 
<q-select
   v-model="product_brand"
   :options="brands"
   option-label="label"
   option-value="id"
   label="Product Brand *"
   lazy-rules
   :rules="[ val => val && val.length > 0 || 'Please select product brand']"
/>

if you just want to collect value instead of object use emit-value and map-option props and your code will be like below:

<q-select
   v-model="product_brand"
   :options="brands"
   option-label="label"
   option-value="id"
   label="Product Brand *"
   lazy-rules
   emit-value
   map-options
   :rules="[ val => val && val.length > 0 || 'Please select product brand']"
/>

Answer 2

im late but you need a lazy loading function

      filterFn(val, update, abort) {
        //This function is used to lazy load the selects
        if (brands.value !== null) {
          // already loaded
          update();
          return;
        }
        setTimeout(() => {
          update(() => {
            brands.value = apiData;
          });
        }, 500);
      },

Then have @filter="filterFn" in your q-select