显示表数据以 vuetify 选择标签答案

【问题标题】：Display table data to vuetify select tag显示表数据以 vuetify 选择标签
【发布时间】：2021-05-03 16:27:40
【问题描述】：

只是想帮助我使用 laravel 作为后端和 vue js。 vuetify 用于前端。

基本上我想在 vuetify 中将我的表中的数据显示到我的 v-select 标记这里是我到目前为止的 sn-p 代码

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

这是我的 v-select 标签

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

这是我的脚本标签代码

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

最后是输出。

希望有人能帮忙

谢谢

【问题讨论】：

标签： vue.js vue-component vuetify.js

【解决方案1】：

According to v-select docs

项目

可以是对象数组或字符串数组。使用对象时，将查找文本、值和禁用键。这可以改变使用 item-text、item-value 和 item-disabled 道具。对象具有标头或分隔符属性被视为特殊情况，并且生成列表标题或分隔符；这些项目不可选择。

如果您无法更改对象的架构，请使用 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>

【讨论】：