vuetify datatable format столбец с помощью позиции элемента Dynami c - PullRequest
Новая
       32

vuetify datatable format столбец с помощью позиции элемента Dynami c

0 голосов
/ 31 марта 2020

В настоящее время я пытаюсь отформатировать строку в таблице vuetify (значения из массива должны отображаться с запятой и пробелом с использованием .join()). Для этого я использую Dynami c #item. слот. Пока я не использую join, et c., Он работает нормально. Это работает: 

<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' of undefined") .

Я пытался скопировать его на коды и коробки. Вместо вышеупомянутой ошибки выдается другая ошибка (Ошибка при рендеринге: «Ошибка типа: элемент [xtc] не определен»). Кроме того, коды и окно преобразует обратные метки в DataTable. vue, строка 49 в Unicode. Чтобы заставить это работать, это должно быть изменено.

Вот ссылка: codesandbox

1 Ответ

1 голос
/ 31 марта 2020

Ключ, который вы пытаетесь использовать для получения текущего значения l oop, не существует в новом созданном объекте. Вот почему вы получите ошибку. Вы должны попытаться оценить, существует ли этот ключ в этом объекте, прежде чем использовать метод .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>
...