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

【问题标题】：Vue.js v-for on list items, looking up array object by idVue.js v-for 在列表项上，通过 id 查找数组对象
【发布时间】：2021-03-17 06:23:46
【问题描述】：

所以我有一个来自 json 的对象数组，看起来像这样：

我正在生成一个<ul>，并且对于每个<li>，我都从一个 API 获得一个 ID：

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

我不想显示数字，我想要类型的名称，它是包含该 ID 的对象的兄弟。

我该怎么做？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component v-for

【解决方案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>

【讨论】：