Search code examples
selectvuetify.jsv-select

How to get v-select items inside items?

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

Solution

  • 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