Vue.js v-for 列表项，通过 id 查找数组对象

Question

所以我有一个来自 json 的对象数组，如下所示：

我正在生成一个 <ul> 并且对于每个 <li> 我从 API:

获得一个 ID

<ul>
  <li v-for="genre in movie.genre_ids">
    {{ genre }} // 19
  </li>
</ul>

我不想显示数字，我想要流派的名称，它是包含该 ID 的对象的同级名称。

我该怎么做？

Answer 1

将您的 genres 数组转换为以 ID 为键的对象：

computed: {
  genresFormatted() {
    const genres = {};
    this.genres.forEach(genre => {
      genres[genre.id] = genre.name;
    });
    return genres;
  }
}

现在循环时更容易获得 name 属性:

<li v-for="id in movie.genre_ids" :key="id">
  {{ genresFormatted[id] }}
</li>

Vue.js v-for 列表项，通过 id 查找数组对象

Vue.js v-for on list items, looking up array object by id

javascript

vue.js

vue-component

vuejs2

v-for