选择自动完成 vuetify 时如何获取对象？答案

【问题标题】：How can I get object when select autocomplete vuetify?选择自动完成 vuetify 时如何获取对象？
【发布时间】：2020-02-17 06:29:21
【问题描述】：

我的代码是这样的：

<div id="app">
  <v-app id="inspire">
    <div>
      <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        v-model="selectedClub"
      ></v-autocomplete>
    </div>
    <v-btn text color="primary" @click="submit">OK</v-btn>
  </v-app>
</div>

演示是这样的：https://codepen.io/positivethinking639/pen/GRRNzVE?&editable=true&editors=101

如果调用了提交方法，它会显示选择的名称。例如：亩

可以在console.log中看到

我希望如果调用提交方法，它会在数组中显示对象。所以我得到了身份证和名字

我该怎么做？

【问题讨论】：

标签： vuetify.js

【解决方案1】：

您可以通过使用 vuetify 中的 return-object 属性以对象形式获取选定的值

比方说，您的选择框有值 [ {name: 'name1', id: 1}, {name: 'name2', id: 2}]

     <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        v-model="selectedClub"
      ></v-autocomplete>

如果您使用上面的代码，您只能从“name”属性中获得值

     <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        item-value="id"
        v-model="selectedClub"
      ></v-autocomplete>

如果你使用上面的代码，你会从“id”属性中获取值

     <v-autocomplete
        label="Clubs"
        :items="clubs"
        item-text="name"
        item-value="id"
        return-object
        v-model="selectedClub"
      ></v-autocomplete>

如果你使用上面的代码，你会得到选择的值作为对象

在这里找到工作代码笔： https://codepen.io/chansv/pen/YzzpMob?editors=1010

【讨论】：