vuetify.js - 选择自动完成 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
和名字

我该怎么做？

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>

If you use the above code you get only value from "name" property

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

If you use the above code, you get value from "id" property

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

If you use the above code, you get the selected value as object

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