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

Question

[Денис Букреев]

Вот сокращенный 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]">

Но это какой-то бред, хуже костыля.
Должен быть более адекватный способ.

Answer 1

[D']

Я тебе уже 3 раза давал схожий ответ, но ты упорно пилишь велосипеды.
При клике на строку выставляй selectedItem, и затем просто:

<tr v-for="idx in selectedItem.fields">
<td>{{ customFields[idx].id }}</td>
<td>{{ customFields[idx].name }}</td>
</tr>

PS
Хотя так оно не должно работать, так как надо делать поиск по ID. Тогда нужно сделать метод getCustomFieldByID(idx) и использовать его.

Comments

[Денис Букреев]

хм, у меня просто другая проблема вообще нависла, я перебираю методы.
такой вариант мне не нравится из-за его неудобства чтения, хотелось бы лаконичности, но будь так. Он мою проблему не убирает, но удобнее моего костыля.

прошу помочь с моей основной проблемой:
есть второе модальное окно, которое выглядит так же, как первое, только с одним отличием: в нем создается новый элемент с новыми полями.

Я все максимально изолирую, поэтому под новый элемент и новые поля создаю отдельные переменные, которые передают значения в data после нажатия кнопки.
Все проходит успешно, в обоих массивах содержатся новые объекты с правильными значениями, все совпадает, все должно выводиться, но

но не выводятся значения полей нового элемента. Я все проверил - новый элемент содержит массив с числами, равными новым полям. Т.е. пустые строки выводятся, а сами не заполняются.
Новые поля вообще ничем не отличаются от старых, только если значениями

[D']

Денис Букреев: я не умею дебажить по описанию. Пример на jsfiddle решит эту проблему.

[Денис Букреев]

D' Normalization: я попробую) но это займет много времени, даже на очень краткую версию

[Денис Букреев]

D' Normalization: я понял в чем моя ошибка)
как раз в PS в твоем сообщении

Answer 2

[lega]

Если сложно нарисовать view из данных, тогда данные можно причесать, подготовить что-бы было удобно строить view, это все же VM а не модель.