时间戳

首页 > 解决方案 > v-select 与动态项目列表

vuetify.js - v-select 与动态项目列表

问题描述

我有一个 v-select （不要忘记返回对象，否则你不会得到 ID）：

<v-select v-model="selectedEmployee"
   :items="employee"
   item-text="name"
   value="id"
   return-object
   hide-details
></v-select>

我在 data 中声明数组加上一个辅助数组和一个变量：

data: {
   employeeList: [],
   employee: [],
   selectedEmployee: null
},

我使用 GET 获取 JSON 数组并将其放入employeeList 中，然后我整理要在 v-select 中显示的数据：

for(i = 0; i < app.employeeList.length; i++) {
   app.employee.push({name: '', id: ''});
   app.employee[i].name = app.employee[i].lastname + ' ' + app.employeeList[i].firstname;
   app.employee[i].id = app.employeeList[i].id;
}

employee.name 显示在 v-select 中，并且由于 return-object 你得到了 .id 连同它。所以 selectedEmployee 的内容是：

{name: 'Jane Doe', id: 0}

如果你不使用 return-object 你只会得到 v-select 下拉菜单中显示的内容。

标签： vuetify.js

解决方案

上面向您展示了如何为 v-select 制作动态项目列表以及如何从中获取可行的值。由于糟糕/无法访问的文档，花了一段时间才把它拼凑起来。也许它对某人有用。

推荐阅读