Vuetify 在 JSON v-data-table 中没有数据时删除括号

Question

我有一个数据列表，对于数据中的一些对象，标签键是空的。在 table 中绘制数据时，正确绘制了具有标签键的数据，但对于没有标签键的对象，它显示为 []。我该如何删除它？

            <template v-slot:[`item.tags`]="item">
            {{item.tags}}
            </template>

带有标签的数据的数据示例

 {"_id": {"$oid": "60c057823e2a3a534cb1b412"}, 
  "tags": "MMM", 
  "DateModified": "2021-06-09 13:54:57"}

无标签数据的数据样本

  {"_id": {"$oid": "60c057823e2a3a534cb1b412"}, 
  "tags": [], 
  "DateModified": "2021-06-09 13:54:57"}

Answer 1

如果您的 tags 字段是一个数组，您不希望在模板中直接调用 {{tags}}。你可能应该有类似

的东西

<span v-for="(tag, i) in tags" :key="i">{{tag}}</span>

Answer 2

您的默认标签有问题

如果我最多可以包含 1 个标签，它应该是一个空字符串而不是一个空数组

你的数据样本没有标签

{
    "_id": {"$oid": "60c057823e2a3a534cb1b412"}, 
    "tags": '', 
    "DateModified": "2021-06-09 13:54:57"
  }

Answer 3

因为当您有数据和没有数据时，您针对每种情况使用不同类型的数据。

最好用这个

<template v-slot:[`item.tags`]="item">
            {{item.tags.length === 0 ? '' : item.tags}}
</template>

Vuetify remove brackets when there is no data in JSON v-data-table