How to pass object data from parent to child components?

Question

I would like to know how to make the contents object visible in the video.vue component.

This is the Video.vue components. This component is where I want to access the content object that is defined in the Home.vue component.

<template>
  <div>
    <h1>{{title}}</h1>
  </div>
</template>

<script>
   export default {
     data() {
       return {
           title: 'Video Section'
       }
     }
   }
</script>

This is the Home.vue component:

   <template>
        <div class="container">
            <div class="column is-one-third" v-for="content in contents.results" :content="content" :key="content.id"> 
                <div v-show="loaded" class="loader"></div>
                <div class="card" >
                    <div class="card-image">
                        <figure class="image">
                            <img :src="imageUrl + content.backdrop_path" alt="Image">
                        </figure>
                    </div>
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <figure class="image is-25x25">
                                    <img id="poster-image" :src="imageUrl + content.poster_path" alt="Image">
                                </figure>
                            </div>
                            <div class="media-content">
                                <p id="movie-title" class="title is-4 no-padding">{{content.original_title}}</p>
                                <p><span class="title is-6"><i class="fas fa-star">{{" " + content.vote_average}}</i></span></p>
                                <p class="subtitle is-6"><i  class="fas fa-calendar-alt">{{" " + content.release_date}}</i></p>
                            </div>
                        </div>
                        <div class="content">
                            {{ content.overview }}
                            <div class="background-icon"><span class="icon-twitter"></span></div>
                        </div>

                        <div id="footer-card-icons">
                            <a href="#"><i class="fas fa-info-circle"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
       export default{
          data: () => ({
            contents: [],
            baseurl: 'https://api.themoviedb.org/3',
            apikey: '16667866c29ba1bc29e687b4892b8d5c',
            imageUrl: 'https://image.tmdb.org/t/p/w1280',
            loaded: true,
         }),

        created: function(){
           this.fetchData();
        },

        methods:{
          fetchData: function(){
            console.log('fetch data')
            this.$http.get(this.baseurl + '/discover/movie?api_key=' +
            this.apikey + '&sort_by=popularity.desc').then(response =>{
                this.contents = response.body;
                this.loaded = false;
            });
           }
        }
      }
 </script>

Answer 1

As Emile’s commented, you should use props in order to be able to pass data from parent to child component.

In your Home.vue, add:

<videos :content=“contents”></videos>

But if your contents data type is Array:

<videos v-for=“content in contents” :key=“content.id” :content=“content”></videos>

Notice that if you use v-for to loop a component, you need to add key attribute also.

Finally, in your Video.vue, you need to define the props like below:

<template>
  <div>
    <p>{{ content.overview }}</p>
  </div>
</template>

<script>
   export default {
     props: [‘content’],
     data() {
       return {
           title: 'Video Section'
       }
     }
   }
</script>

Remember, props are reactive. It will respond to any updates or changes in content.

UPDATE: It seems you have not properly declared your component. See codepen link. Better if you could declare any other components as Single File Components as explained here.