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'”）。。 >

我试图在codeandbox上复制它。代替上述错误，将引发另一个错误（渲染错误：“ 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>

带有动态项目槽的vuetify datatable格式列

1 个答案: