如何将 api 数据值放入 quasar 框架的选择选项中？

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

例如，如果品牌数组是这样的

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']"
/>

如果您只想收集值而不是对象，请使用 emit-value 和 map-option 道具，您的代码将如下所示：

<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']"
/>