具有动态项目槽的 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 行：&nbsp;&nbsp;<span&nbsp;:key="itm"&nbsp;class="red--text">{{&nbsp;item[itm]&nbsp;}}</span>和：&nbsp;&nbsp;<span&nbsp;:key="itm"&nbsp;class="red--text">{{&nbsp;itm&nbsp;in&nbsp;item&nbsp;?&nbsp;item[itm].join(",&nbsp;")&nbsp;:&nbsp;""}}</span>