Имею следующие компоненты:
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>
Все выводится правильно в следующем формате:
Суть ошибки: Когда кликаю на router-link в компоненте Genre.vue появляется следующая ошибка:
[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:
Говорит мол :key is not defined хотя я его явно указывал в Genres.vue
Прошу вашей помощи!