Display table data to vuetify select tag

Question

just want help am using laravel as backend and vue js. vuetify for the front end.

Basically I want to display a data from my table to my v-select tag in vuetify here is my snippet code so far

locations_table 
id  name
1   box 1
2   box 2
3   box 3

here is my v-select tag

<v-col cols="12" sm="12" md="6">
    <v-select :items="locations" label="Location" v-model="item.location"></v-select>
</v-col>

and here is my code for script tag

locations: [
          { text: 'Name', align: 'start', value: 'name', },
        ],

and finally the output.

hope someone can help

thanks

Józef Podlecki Józef Podlecki · Accepted Answer · 2021-01-29T18:29:23

According to v-select docs

items

Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.

If you can't change schema of objects use item-text item-value props

<v-col cols="12" sm="12" md="6">
    <v-select :items="locations"
           :item-text="pr => pr.name"
           :item-value="pr => pr.id"
           label="Location"
           v-model="item.location"></v-select>
</v-col>

Display table data to vuetify select tag

1 Answers