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

Posted 2023-02-16

【中文标题】Vue.js v-for 在列表项上，通过 id 查找数组对象

【英文标题】：Vue.js v-for on list items, looking up array object by 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 的对象的兄弟。

我该怎么做？

【参考方案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>