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

问题描述

---

我正在尝试将我的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)
    })
  },}

解决方法

例如，如果品牌数组类似

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