vue.js - Vue v-select 对象数组

Question

我正在尝试将一个对象数组绑定(bind)到一个 v-select，以便当用户选择一个选项时，我可以访问与该选项关联的多个数据点。但是，我只希望它在下拉列表本身中显示一个值，即名称。如果我使用 itemText 使其在下拉列表中正确显示，它只会将其绑定(bind)到该名称，我无权访问与其关联的其余信息。

例如，这是我的对象数组:

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

这是我的 v-select:

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

然后当我想使用 selectedMember 时，它被设置为“示例配置文件名称”而不是整个成员对象。我如何将值绑定(bind)到整个对象？

Answer 1

在 v-select 上使用 return-object Prop 似乎是返回整个对象的最简单方法，而不仅仅是所选成员的名称。

只需添加 return-object 属性，每次都会返回整个对象，如下所示:

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

这是一个演示:

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>