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

Question

[dicem]

Имею следующие компоненты:

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
Прошу вашей помощи!

Comments

[Михаил]

интересно, попробуйте key к диву выше применить

[Дмитрий]

Поменяйте имя этого параметра параметра для компонента Genre.

Answer 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>

Comments

[dicem]

Да, это была тоже фатальной ошибкой, однако главная ошибка крылась в роутере, уже исправил, спасибо за ответ.

[Maxor1k]

dicem, друг, ты бы хоть написал, как поправил :)

[dicem]

Maxor1k, кароч я уже точно не вспомню, однако, в роутере я импортировал компоненты следующим образом:

{
  name: 'name',
  path: '/',
  component: () => import('./Name.vue')
}

Вот эта херня и давала ошибку, сделал по старинке, через

import Name from './Name.vue'
...
{
  name: 'name',
  path: '/',
  component: Name
}

И ошибочка пропала

[Maxor1k]

dicem, спасибо за ответ)
У меня была вчера эта ошибка, оказалось дело в том, что я неправильно передавал параметр в метод

<div v-for='(value, index) in inputs' :key='index'>
        <input type="text" v-on:input='valid( [$event.target, index])'>
</div>

valid( [$event.target, index]) вот сюда я вместо index пытался key сунуть)