Vue v-select array of objects

Question

I am trying to bind an array of objects to a v-select so that when the user selects an option, I have access to multiple data points associated with that option. However, I only want it to show one value in the dropdown itself, which would be the name. If I use itemText to have it displayed correctly in the dropdown, it binds it to that name only and I do not have access to the rest of the info associated with it.

For example, here is my array of objects:

    memberships = [{
     memberExpirationDate: (...),
     memberUsername: 'John Jones',
     membershipId: 234
     membershipProfileName: 'Sample Profile Name'
    }]

And here is my v-select:

    <v-select v-model="selectedMember"
       :items="memberships"
       item-text="membershipProfileName"
       filled
       required>
    </v-select>

Then when I want to use selectedMember it is set to 'Sample Profile Name' instead of the entire membership object. How would I bind the value to the entire object?

Answer 1

Using the return-object prop on your v-select seems to be the simplest way to return the entire object, instead of just the selected member's name.

Simply add the return-object prop, and the entire object will be returned each time instead, like so:

<v-select 
    v-model="selectedMember" 
    :items="memberships" 
    item-text="memberUsername"
    filled 
    return-object 👈 ADD IT HERE
></v-select>

Here's a demo:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    selectedMember: {
      memberExpirationDate: '2/3/21',
      memberUsername: 'John Jones',
      membershipId: 234,
      membershipProfileName: 'Sample Profile Name'
    },
    memberships: [{
      memberExpirationDate: '2/3/21',
      memberUsername: 'John Jones',
      membershipId: 234,
      membershipProfileName: 'Sample Profile Name'
    }, {
      memberExpirationDate: '2/4/21',
      memberUsername: 'John Jones II',
      membershipId: 235,
      membershipProfileName: 'Sample Profile Name II'
    }, {
      memberExpirationDate: '2/5/21',
      memberUsername: 'John Jones III',
      membershipId: 236,
      membershipProfileName: 'Sample Profile Name III'
    }]
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">


<div id="app">
  <v-app style="padding: 30px;">

    <v-select v-model="selectedMember" :items="memberships" item-text="memberUsername" return-object filled></v-select>

    <pre>{{ selectedMember }}</pre>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>