vuetify datatable format column with dynamic item-slot

Question

I am currently trying to format a row in a vuetify table (values from an array should be displayed with comma and space using .join()). For this I use a dynamic #item. slot. As long as i don't use join, etc., it works fine. This one works:

<template
              v-for="itm in filteredItem"
              v-slot:[`item.${itm}`]="{ item }"
              ><span :key="itm" class="red--text">{{
                item[itm]
              }}</span></template
            >

And here ist the code i want to work (but doesn't):

<template
              v-for="itm in filteredItem"
              v-slot:[`item.${itm}`]="{ item }"
              ><span :key="itm" class="red--text">{{
                (item[itm]).join(', ')
              }}</span></template
            >

As soon as the page reloads, everything is formatted correctly. But as soon as I add a new item in the table, or edit an existing one, I get errors (Error in render: "TypeError: Cannot read property 'join' of undefined").

I tried to replicate it on codesandbox. Instead of the above mentioned error another one is thrown (Error in render: "TypeError: item[xtc] is undefined"). Besides that codesandbox converts backticks in DataTable.vue, line 49 to unicode. In order to get it to work, this must be changed.

Here's the link: codesandbox

Robinson Villegas Robinson Villegas · Accepted Answer · 2020-03-31T11:55:44

The key you are trying to use to get the current loop value doesn't exist in the new created object. That's why you would be getting the error. You should try evaluating if that key exist in that object before using the .join(', ') method.

Try replacing line codesandbox DataTable.vue line 50:

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

with:

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

vuetify datatable format column with dynamic item-slot

1 Answers