Как правильно настроить вывод данных во VueJS?

Вот сокращенный JSON-формат data:
Items: [
  {
    name: 'Lawnmower',
    fields: [ 1, 4, 5 ]
  },
  {
    name: 'Crusher',
    fields: [ 2, 3 ]
  }
],
customFields: [
  {
    id: 1,
    name: 'Horsepower'
  },
  {
    id: 2,
    name: 'Engine type'
  },
  {
    id: 3,
    name: 'Is work?'
  },
  {
    id: 4,
    name: 'Year of Issue'
  },
  {
    id: 5,
    name: 'EXP.'
  }
]


Есть таблица, которая выводит массив Items, при клике по строке из этой таблицы открывается модальное окно, где выводится таблица со строками из customFields, принадлежащим объекту из первой таблицы.
Вот.

Как правильно вывести вторую таблицу?
Я пока прописал такой код (рабочий, к моему удивлению):
<tr v-for="idx in Items" v-if="field = customFields[idx]">

Но это какой-то бред, хуже костыля.
Должен быть более адекватный способ.
  • Вопрос задан
  • 429 просмотров
Решения вопроса 2
Denormalization
@Denormalization
Я тебе уже 3 раза давал схожий ответ, но ты упорно пилишь велосипеды.
При клике на строку выставляй selectedItem, и затем просто:
<tr v-for="idx in selectedItem.fields">
<td>{{ customFields[idx].id }}</td>
<td>{{ customFields[idx].name }}</td>
</tr>


PS
Хотя так оно не должно работать, так как надо делать поиск по ID. Тогда нужно сделать метод getCustomFieldByID(idx) и использовать его.
Ответ написан
@lega
Если сложно нарисовать view из данных, тогда данные можно причесать, подготовить что-бы было удобно строить view, это все же VM а не модель.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы