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

lorem_impus · Accepted Answer · 2020-10-25 09:28:25Z

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

answered Oct 25, 2020 at 9:28

lorem_impus

3504 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anekdotin Over a year ago

this solved my issue ty

lorem_impus Over a year ago

sure, happy to help

Ali SaZa · Accepted Answer · 2020-09-30 12:20:27Z

0

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

answered Sep 30, 2020 at 12:20

Ali SaZa

954 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related