How to properly set up data output in VueJS?

Question

JavaScript

So it goes.
Here is the abbreviated JSON data format:

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.'
  }
]

There is a table that displays the Items array, when you click on a row from this table, a modal window opens, where a table is displayed with rows from customFields belonging to an object from the first table.
Here.
How to display the second table correctly?
So far I have written the following code (working, to my surprise):

<tr v-for="idx in Items" v-if="field = customFields[idx]">

But this is some kind of nonsense, worse than a crutch.
There must be a better way.

Answer 1

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

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

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