select - 如何在项目中获取 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链接https://codepen.io/yurenlimbu/pen/bGVKGEa?editors=1011

Answer 1

我对此有所了解，因为我过去在 vuetify 下拉列表中也遇到了一些问题，我设法让它工作，您可能需要更新当前数据对象以使名称键在列表中唯一。

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

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

• 从地图连接数组的辅助函数
• item-value 属性更新以访问整个对象，并链接到 e11 v-model

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

编辑：

我已经包含了 item 和 selected item 的插槽，因此您可以更改数据在 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 文档，或者在我的示例中，使用文本名称中的帮助程序而不是访问 companyName 的项目。但是根据我之前的帖子，我认为这样做的潜在方法是将对象注入/取消转移到员工中：

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

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

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

现在只是定位父母以匹配您的 gif 的问题，但我绝不说这是最好的方法，就像我之前说的那样，我过去遇到了 vuetify 的问题，所以我希望这可以帮助您解决问题，直到您解决最好的方法