Как передать данные из v-for в дочерний компонент?

Question

[dicem]

Суть: имеется компонент который подгружает список категорий

Genres.vue

<template>
	<div class="row">
		<div class="col-md-3" v-for="item in genres">
			<Genre :key="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>

Планировал сделать следующее: взять данные из api в Genres.vue и вывести их в компонент:

Genre.vue

<template>
	<div class="card">
		<div class="card-body">
			<h5 class="card-title">{{ name }}</h5>
			<a href="#" class="btn btn-primary">К фильмам</a>
		</div>
	</div>
</template>

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

Получаю собственно ошибку:

Ошибка

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Genre> at src/components/Genre.vue
       <Genres> at src/components/Genres.vue
         <Home> at src/views/Home.vue
           <App> at src/App.vue
             <Root>

В принципе я понимаю откуда ошибка, но в таком случае не могу понять каким образом я данные полученные путем v-for="item in genres" передать в компонент Genre.vue

Answer 1

[Михаил]

props: ['name']

Comments

[dicem]

Господи я себя настолько дебилом еще не ощущал, спасибо за помощь

[Михаил]

dicem, https://vuejs.org/v2/style-guide/#Prop-definitions...