Задать вопрос
dicem
@dicem

Как исправить ошибку ReferenceError: key is not defined?

Имею следующие компоненты:
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>


Все выводится правильно в следующем формате:
5d9d09b47e5d3385194205.png

Суть ошибки: Когда кликаю на 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
Прошу вашей помощи!
  • Вопрос задан
  • 911 просмотров
Подписаться 1 Простой 2 комментария
Решения вопроса 1
@imp-1903
Укажи key для div, которому ты дал v-for="..."
Чтобы в итоге вышло так:

<div class="col-md-4" v-for="item in genres" :key="item.id">
      <Genre :id="item.id" :name="item.name"></Genre>
</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы