How to use different value in list and menu in vuetify v-select?

Question

How can I change this example so that in the menu I will get things like "Florida, FL" but in the actual v-select I get "FL" only.

 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

You don't have to change the settings, only add @change handler to the component, and handle it with a method . Watch for passing the emitted event to your method ( $event ). By passing the values of the emitted event to your method, you can work with the object that was selected (the event actually passes that object to your method).

 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>

OTHER HINT

You had an extre Vue script reference in your snippet - I removed it in mine.

EDIT

To have access to the dropdown items, you have to use the item slot v v-select offers. There you can modify the appearance of the items however you want.