javascript - 具有动态项槽的 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
            >

页面重新加载后，所有内容的格式都会正确。但是，一旦我在表中添加新项目或编辑现有项目，我就会收到错误(渲染中的错误:“TypeError:无法读取未定义的属性'join'”)。 p>

我尝试在codesandbox上复制它。抛出的不是上述错误，而是另一个错误(渲染中的错误:“TypeError:item [xtc]未定义”)。除此之外，codesandbox 将 DataTable.vue 第 49 行中的反引号转换为 unicode。为了让它工作，必须改变这一点。

链接如下:codesandbox

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>