[Vuejs]-Vuetify – using change event assign the selected item to a data property

2πŸ‘

βœ…

In your case, you cannot use site.name because if you make item-value="id", site value will be the same as id.
I made a simple codepen for your issue.
Please reference it. https://codepen.io/endmaster0809/pen/OJNpmyG

<label>Client name: {{clientname}}</label>
<v-select
   :items="sites"
   label="Sites"
   item-text="name"
   item-value="id"
   @change="handleSiteChange"
 ></v-select>
...
handleSiteChange(id) {
  let site = this.sites.filter(item => item.id === id);
  if(site.length > 0) {
    this.clientname = site[0].name;
  }
}

Leave a comment