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

Question

我的代码是这样的：

<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

如果调用 submit 方法，则显示选定的名称。例如：亩

你可以在console.log中看到

我想要如果调用提交方法，它会在数组中显示对象。所以我得到了 id 和 name

我该怎么做？

Answer 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