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

【问题标题】：vuetify datatable format column with dynamic item-slot具有动态项目槽的 vuetify 数据表格式列
【发布时间】：2020-07-11 21:44:19
【问题描述】：

我目前正在尝试格式化 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>

我试图在代码沙盒上复制它。而不是上面提到的错误，另一个错误被抛出（渲染中的错误：“TypeError：item [xtc] is undefined”）。除此之外，codeandbox 将 DataTable.vue 第 49 行中的反引号转换为 unicode。为了让它工作，必须改变它。

这是链接：codesandbox

【问题讨论】：

标签： javascript vue.js datatable vuetify.js

【解决方案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>

【讨论】：

感谢您的解释。这让一切都清楚了。你的解决方案就像一个魅力。