How to fix ReferenceError: key is not defined error?

Question

Vue.js

I have the following components:

Genres.vue

<template>
  <div class="row">
    <div class="col-md-4" v-for="item in genres">
      <Genre :key="item.id" :id="item.id" :name="item.name"></Genre>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        genres: {}
      }
    },
    components: {
      Genre: () => import('./Genre')
    },
    methods: {
      getGenres() {
        this.axios.get(`https://api.themoviedb.org/3/genre/movie/list?api_key=${this.api_key}`)
          .then( response => this.genres = response.data.genres )
          .catch( err => console.log(err))
      }
    },
    mounted() {
      this.getGenres()
    }
  }
</script>

Genre.vue

<template>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">{{ name }}</h5>
      <router-link :to="'/genre/' + id" class="btn btn-primary">К фильмам</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['id', 'name']
  }
</script>

<style lang="less" scoped>
  .card {
    margin-bottom: 30px;
  }
</style>

Everything is displayed correctly in the following format:

The essence of the error: When I click on the router-link in the Genre.vue component, the following error appears:

[vue-router] Failed to resolve async component default: ReferenceError: key is not defined

vue-router.esm.js?8c4f:16 [vue-router] uncaught error during route navigation:

Says they say :key is not defined although I explicitly indicated it in Genres.vue
Please help!

Answer 1

Give a key to the div you gave v-for="..."
to end up like this:

<div class="col-md-4" v-for="item in genres" :key="item.id">
      <Genre :id="item.id" :name="item.name"></Genre>
</div>