dicem
@dicem

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

Суть: имеется компонент который подгружает список категорий
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
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
notiv-nt
@notiv-nt
props: ['name']
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы