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?

marsnebulasoup · Accepted Answer · 2021-05-13 22:13:24Z

7

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>

edited May 13, 2021 at 22:13

answered Mar 9, 2021 at 20:59

marsnebulasoup

2,7003 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

marsnebulasoup Over a year ago

@Linx - Hopefully this answered your question, but please let me know if you have any other ones related to this, or if there's something here you need explained in more detail.

Linx Over a year ago

That did it! Thanks so much

marsnebulasoup Over a year ago

Sure thing, glad to help!

Collectives™ on Stack Overflow

Vue v-select array of objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related