vue.js - Get the item-text from a v-select

Question

I have a Vuetify data table. When a row is clicked a dialog data-card opens displaying the data of the row clicked using:

rowEdit: function (item) {
    this.editedIndex = this.vehicles.indexOf(item)
    this.editedItem = Object.assign({}, item)
    this.dialogEditAdd = true
},

In the dialog I have all the data and a Select as below:

<v-select
    :items="owners"
    item-text="username"
    item-value="id"
    label="Owner"
    v-model="editedItem.userId"
></v-select>

All of this works fine and the data displays in the card correctly, but how do I get the selected item-text?

console.log('User ID: ' + this.editedItem.userId)

outputs the value of the selected item but I also need to get the text.

console.log('Username: ' + this.editedItem.userId.text)

returns undefined.

question from:https://stackoverflow.com/questions/65908052/get-the-item-text-from-a-v-select

Answer 1

You should add return-object prop in order to get the whole object properties and bind that object using v-model:

<v-select
    :items="owners"
     return-object
    item-text="username"
    item-value="id"
    label="Owner"
    v-model="editedItem"
></v-select>