如何將 api 數據值放入類星體框架的 select 選項中？

Question

---

我正在嘗試將我的 api 值放入 q-select 但它顯示所有值的[object Object]

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

這是獲取 api 值的腳本代碼

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

---

我試圖將我的 api 值放入 q-select 但它顯示所有值的[object Object]

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

這是獲取api值的腳本代碼

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

我遲到了，但你需要延遲加載 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);
      },

然后在你的 q-select 中有@filter="filterFn"