如何在项目中获取 v-select 项目？

Question

我有一个下拉菜单 v-select

    <v-select
      label="Select"
      v-bind:items="companies"
      v-model="e11"
      item-text="employee.name"
      item-value="name"
      max-height="auto"
     >
   </v-select>

来自API的数据喜欢

new Vue({
  el: '#app',
  data () {

    return {
      e11: [],
      companies: [
        {
          companyName: 'Google',
          employee: [{
            name: 'Sandra Adams',
            name: 'Ali Connors',
            name: 'Trevor Hansen',
            name: 'Tucker Smith',
          }]
        },
        {
          companyName: 'Facebook',
          employee: [{
            name: 'Sandra Adams',
            name: 'Ali Connors',
            name: 'Trevor Hansen',
            name: 'Tucker Smith',
          }]
        },
        {
          companyName: 'Twitter',
          employee: [{
            name: 'Sandra Adams',
            name: 'Ali Connors',
            name: 'Trevor Hansen',
            name: 'Tucker Smith',
          }]
        },
      ]
    }
  }
})

在下拉项中将 [object object] 固定固定了吗？我想获得按公司名称分组的下拉列表。

这是我想做的

这是codepen link https://codepen.io/yurenlimbu/pen/bGVKGEa?editors=1011

Answer 1

我有一个破解，因为我过去也有一些关于 vuetify 下拉菜单的问题，我设法让它工作，你可能需要更新你当前的数据 objects 来制作名称键在列表中是唯一的。

添加了计算属性来映射公司和员工并注入员工公司，这样我们就有了一个 object 和我们需要的数据

mappedNames: function() {
      return this.companies.map(function(person) {
        person.employee.forEach(e => e.company = person.companyName)
        return person.employee
        })
    }

从地图连接数组的辅助函数
item-value 道具更新以访问整个 object，并链接到 e11 v-model

这是代码笔： https://codepen.io/mcwalshh/pen/Vwvdvve

编辑：

我已经为项目和 selected 项目添加了插槽，因此您可以更改数据在 select:

中的显示方式

  <template v-slot:selection="data">
    {{ data.item.name }} - {{ data.item.company }}
  </template>

参考：https://vuetifyjs.com/en/components/selects/

这是更新后的代码笔： https://codepen.io/mcwalshh/pen/rNOKqvd

编辑#2：

不太确定如何添加标题，我建议阅读更多 vuetify 文档，或者在我的示例中，使用 text-name 中的帮助程序而不是项目来访问 companyName。但是根据我之前的帖子，我认为这样做的潜在方法是 inject/unshift 一个 object 进入员工：

{ name: person.employee.companyName, type: "title" }

现在在我的示例中，我将它直接添加到 object，然后使用模板 v-if 来确定什么是标题：

代码笔：https://codepen.io/mcwalshh/pen/NWGzeoK

现在只需要定位 parent 来匹配你的 gif，但我绝不是说这是最好的方法，就像我在过去遇到 vuetify 问题之前所说的那样，所以我希望这个可以帮助你，直到你找到最好的方法

如何在项目中获取 v-select 项目？

How to get v-select items inside items?

select

vuetify.js

v-select