Reputation: 5970
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.
Upvotes: 2
Views: 2619
Reputation: 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>
Upvotes: 2