具有动态项目槽的 vuetify 数据表格式列

Question

我目前正在尝试格式化 vuetify 表中的一行（数组中的值应使用逗号和空格显示.join()）。为此，我使用动态#item。投币口。只要我不使用join等，它就可以正常工作。这个有效：<template              v-for="itm in filteredItem"              v-slot:[`item.${itm}`]="{ item }"              ><span :key="itm" class="red--text">{{                item[itm]              }}</span></template            >这是我想要工作的代码（但不是）：<template              v-for="itm in filteredItem"              v-slot:[`item.${itm}`]="{ item }"              ><span :key="itm" class="red--text">{{                (item[itm]).join(', ')              }}</span></template            >页面重新加载后，所有内容都已正确格式化。但是，一旦我在表中添加新项目或编辑现有项目，我就会收到错误(Error in render: "TypeError: Cannot read property 'join' of undefined")。我试图在代码沙盒上复制它。除了上面提到的错误之外，还会引发另一个错误（渲染中的错误：“TypeError：item[xtc] is undefined”）。除此之外，codeandbox 将 DataTable.vue 第 49 行中的反引号转换为 unicode。为了让它工作，必须改变它。

Answer 1

您尝试用于获取当前循环值的键在新创建的对象中不存在。这就是为什么你会得到错误。.join(', ')在使用该方法之前，您应该尝试评估该对象中是否存在该键。

尝试替换行代码和框 DataTable.vue 第 50 行：

  <span :key="itm" class="red--text">{{ item[itm] }}</span>

和：

  <span :key="itm" class="red--text">{{ itm in item ? item[itm].join(", ") : ""}}</span>