How to pass data from v-for to child component?

Question

Vue.js

Essence: there is a component that loads the list of categories

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>

I planned to do the following: take the data from the api to Genres.vue and output it to the component:

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>

I get the actual error:

Mistake

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>

In principle, I understand where the error comes from, but in this case I can’t understand how I can transfer the data obtained by v-for="item in genres" to the Genre.vue component

Answer 1

props: ['name']