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

事件放在 var 中的

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/plsdev89/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;
  }
}