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

Question

So I have an array of objects from json that looks like this:

I'm generating a <ul> and for each <li> I get an ID from an API:

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

I do not want to display the number, I would like the name of the genre, which is a sibling of the object that contains that ID.

How can I do that?

Dan · Accepted Answer · 2020-12-05 11:43:06Z

2

Convert your genres array into an object whose keys are the IDs:

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

Now it's much easier to get the name property when looping:

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

answered Dec 5, 2020 at 11:43

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related