0

I have a dropdown with 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>

Data from API like

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',
          }]
        },
      ]
    }
  }
})

In dropdown item getting [object object] to fixed fixed it? I want to get dropdown list with grouped by company name.

Here is what I want to do enter image description here

Here is the codepen link https://codepen.io/yurenlimbu/pen/bGVKGEa?editors=1011

user2389511
  • 61
  • 2
  • 11
  • Are you hoping to show a list of companies with a select list to select an employee from each company? I don't think you can do nested select lists with v-select, you certainly can't with standard HTML selects. You probably need to use v-for to iterate the companies and then pass each company's employees to it's own v-select. – coedycode May 11 '20 at 11:00

1 Answers1

1

I had a crack at it, as ive also had some issues in the past with vuetify dropdown, i managed to get it to work, you may need to update your current data objects to make the name key unique in the list.

  • Added computed property to map companies and employees and inject the employees company so we have one object with the data we need

mappedNames: function() {
      return this.companies.map(function(person) {
        person.employee.forEach(e => e.company = person.companyName)
        return person.employee
        })
    }
  • Helper function to concat the arrays from the map
  • item-value prop update to access entire object, and linked to e11 v-model

enter image description here

Here is the codepen: https://codepen.io/mcwalshh/pen/Vwvdvve

EDIT:

I've included the slot for item and selected item, so you can change how the data is displayed inside the select:

  <template v-slot:selection="data">
    {{ data.item.name }} - {{ data.item.company }}
  </template>
ref: https://vuetifyjs.com/en/components/selects/

enter image description here

Here is the updated codepen: https://codepen.io/mcwalshh/pen/rNOKqvd

EDIT #2:

Not really sure how to go about adding titles, i suggest reading more vuetify documentation, or perhaps in my example, use the helper in the text-name instead of the items to access companyName. But following from my previous posts, i think the potential way of doing it, is to inject/unshift an object into the employees with:

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

For now in my example i add it straight to the object, then use template v-if's to determine what is a title: enter image description here

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

Now just a matter of targeting parent to match your gif, but im in no way saying this is the best approach, like i said before i had issues with vuetify in the past, so i hope this can help get you by until you work out the best method

procoib
  • 477
  • 1
  • 4
  • 11