Vuetify-使用更改事件将所选项目分配给数据属性

Question

我有一个v-select，看起来像这样：

<v-select
v-model="editedItem.site_id"
:items="sites"
label="Sites"
item-text="name"
item-value="id"
></v-select>

网站项目如下所示：

0:
city: (...)
client: Object
created_at: "2020-08-20T11:11:12.000000Z"
created_by: "..."
deleted_at: null
id: 1
name: "Lemmer"
updated_at: "2020-08-24T03:53:39.000000Z"
updated_by: "..."
client_id: (...)
country: (...)
country_id: (...)
created_at: (...)
created_by: (...)
deleted_at: (...)
id: (...)
name: (...)
office: (...)
street: (...)
updated_at: (...)
updated_by: (...)
zipcode: (...)

所以现在我想把@change事件的sites.client.name放在变量中。这里的最佳方式是什么？

我试过这个：

<v-select
v-model="editedItem.site_id"
:items="sites"
label="Sites"
item-text="name"
item-value="id"
@change="clientname = sites.client.name"
></v-select>

但我得到了这个错误：

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'name' of undefined"

Answer 1

在您的情况下，您不能使用site.name，因为如果您使item value="id"；，站点值将与id相同。我为你的问题做了一个简单的代码笔。请参考。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;
}
}