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
        })
    }

帮助程序功能从地图上连接数组
道具价值道具更新以访问整个对象，并链接到e11 v-model

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

编辑：

我已经包含了项目和所选项目的插槽，因此您可以更改数据在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确定标题是什么：

codepen：https://codepen.io/mcwalshh/pen/NWGzeoK

现在只需将父对象定位为匹配您的gif即可，但是即时消息绝不会说这是最好的方法，就像我以前在谈到vuetify问题之前所说的那样，所以我希望这可以帮助您你找出最好的方法

如何获得物品内的v-select物品？

1 个答案: