Vuetify - 使用芯片列在 v-data-table 中搜索（基于对象）

Question

我有一个 v-data-table，其中包含我预先定义的标题， 我从 API 获得的其中一列是对象数组 (application_tags)，如下所示：

[ { "application_id": 1, "application_name": "m***" }, { "application_id": 2, "application_name": "str***" }, { "application_id": 3, "application_name": "r***" } ]

标头本身的定义如下：

...
{ key: 'application_tags',      title: 'Application Tags'},
...

我像这样定义了表格和搜索栏：

<template v-slot:text>
            <v-text-field 
                v-model="search" 
                density="comfortable" 
                clearable
                placeholder="Search for any attribute of a resource" 
                prepend-inner-icon="mdi-magnify" 
                variant="outlined" 
                theme="light"
                hide-details 
                single-line
            ></v-text-field>
        </template>
<v-data-table 
    headers="Resources" 
    :items="records" 
    :search="search" 
    :loading="loading"
>
<template v-slot:item.application_tags="{item}">
    <v-chip-group v-model="search" selected-class="text-primary" column>
        <v-chip
        size="small"
        v-for="tag in item.application_tags"
        :key="tag.application_name"
        :text="tag.application_name"
        :value="tag.application_name"
        ></v-chip>
    </v-chip-group>
</template>
</v-data-table>

当我点击某个芯片时，芯片中的文本确实会移动到搜索栏， 但实际结果是空的... 没有任何东西： 在此输入图片描述

单击芯片： 在此输入图片描述

而奇怪的事情（或者也许不是）是，当我在搜索栏中输入 1 时，

str***

的芯片被标记。 在此输入图片描述

如果我返回 application_name 值的数组（而不是 application_id&application_name 的数组） 它确实有效... 但我需要将它与其 id 相匹配...

Answer 1

找到了解决办法， 在标头中，我为该特定标头定义了一个值，如下所示：

value: item => item.application_tags.map(obj => obj['application_name']), 

这样，正在搜索的值就在列表中......