[Vuejs]-How to put axios data into v-select by v-for?

0πŸ‘

βœ…

If this is for the vuetify v-select component for :items="deserts" (notice items plural) you would need to have an array of objects like

deserts: [
    {text: "The name", value:"the ID"},
    ...
]

or you can use the directives

item-text="name"
item-value="id"

and then your :items object can look like

[{"id": 1,"name": "aaa"}, {"id": 4,"name": "bbb"}, {"id": 5,"name": "ccc"}, {"id": 9,"name": "ddd"}]

You can use the map method if you need to map the data from the server in to the correct format

this.selectOptions = resp.data.options.map(options => ({value: option.id, text: option.name}));

0πŸ‘

desserts is an array, so it doesn’t have the name property, as written in your template.

Probably <v-select :item="desserts"></v-select> is just fine.

Please, look at the official vuetify doc in order to understand which props pass to v-select to make it work correctly: https://vuetifyjs.com/en/components/selects/

0πŸ‘

I guess this one can solve the problem:

<v-select :item="desserts.filter(item => item.name)"></v-select>

Leave a comment