How to get my api data into select list in quasar vue js?

Question

I am getting object Object in the select dropdown list

Here is my code

<q-select v-model="product_category" :options="options" label="Project Category" />

Script code

data () {
return {
  options: [],
 }
},
created () {
this.$axios.get([
  'http://127.0.0.1:8000/api/lailen-inventory/categories'
])
  .then(res => {
    this.options = res.data.categories
  })
}

Answer 1

You could make your value an object containing the type and id. Like this:

data () {
    selectOptions: [{
        label: yourInitialObject.title,
        value: {
           id: yourInitialObject.id,
           type: yourInitialObject.type
        }
    }]
}

Answer 2

I think you have to add option-label and option-value props on the <q-select> tag. If your res.data.categories (for example) looks like this

[
  { id: 1, name: 'water' },
  { id: 2, name: 'earth' },
  { id: 3, name: 'fire' },
  { id: 4, name: 'air' }
]

then your <q-select> tag should look like this

<q-select
  v-model="product_category"
  :options="options"
  option-value="id"
  option-label="name"
  label="Project Category"
/>