如何将 api 数据值放入类星体框架的 select 选项中？

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

---

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 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