如何在 vuetify v-select 的列表和菜單中使用不同的值？

Question

我怎樣才能改變這個例子，以便在菜單中我會得到像“Florida, FL”這樣的東西，但在實際的 v-select 中我只得到“FL”。

 new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { select: [{ state: 'Florida', abbr: 'FL' }], items: [ { state: 'Florida', abbr: 'FL' }, { state: 'Georgia', abbr: 'GA' }, { state: 'Nebraska', abbr: 'NE' }, { state: 'California', abbr: 'CA' }, { state: 'New York', abbr: 'NY' }, ], } }, })

 <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"/> <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> <div id="app"> <v-app id="inspire"> <v-container fluid> <v-row align="center"> <v-col cols="6"> <v-subheader>Custom items</v-subheader> </v-col> <v-col cols="6"> <v-select v-model="select":items="items" item-text="state" item-value="abbr" label="Select" persistent-hint multiple ></v-select> </v-col> </v-row> </v-container> </v-app> </div>

Answer 1

您不必更改設置，只需將@change處理程序添加到組件，並使用方法進行處理。 注意將發出的事件傳遞給您的方法 ( $event )。 通過將發出的事件的值傳遞給您的方法，您可以使用選定的對象（事件實際上將該對象傳遞給您的方法）。

 new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { select: [{ menuText: 'Florida, FL', state: 'Florida', abbr: 'FL' }], items: [{ state: 'Florida', abbr: 'FL' }, { state: 'Georgia', abbr: 'GA' }, { state: 'Nebraska', abbr: 'NE' }, { state: 'California', abbr: 'CA' }, { state: 'New York', abbr: 'NY' }, ], } }, computed: { menuItems() { return this.items.map(e => { return { menuText: e.state + ', ' + e.abbr, ...e } }) } }, methods: { logValue(e) { this.select = e console.log(e) } } })

 /*.v-select__selection.v-select__selection--comma { display: none; }*/.v-text-field__prefix { color: #242729; }

 <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" /> <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> <div id="app"> <v-app id="inspire"> <v-container fluid> <v-row align="center"> <v-col cols="6"> <v-subheader>Custom items</v-subheader> </v-col> <v-col cols="6"> <v-select v-model="select":hint="`${select.state}, ${select.abbr}`":items="menuItems" item-text="abbr" item-value="menuText" return-object single-line @change="logValue($event)" multiple> <template v-slot:item="{ item }"> <strong>{{item.menuText}}</strong> </template> </v-select> </v-col> </v-row> </v-container> </v-app> </div>

其他提示

您的代碼段中有一個 extre Vue 腳本引用 - 我在我的代碼中刪除了它。

編輯

要訪問下拉項目，您必須使用項目插槽v v-select offers。 您可以在那里隨意修改項目的外觀。