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: {&nbsp; genresFormatted() {&nbsp; &nbsp; const genres = {};&nbsp; &nbsp; this.genres.forEach(genre => {&nbsp; &nbsp; &nbsp; genres[genre.id] = genre.name;&nbsp; &nbsp; });&nbsp; &nbsp; return genres;&nbsp; }}name现在循环时获取属性要容易得多：<li v-for="id in movie.genre_ids" :key="id">&nbsp; {{ genresFormatted[id] }}</li>