I

Table of Contents

    n the last lesson, we created a Tweet component. In this lesson we are going to create a Tweets component which will be composed of the Tweet components. Within the Tweet folder, create Tweets.vue file. Paste the code below in the newly created file:

    // src/components/Tweet/Tweets.vue
    
    <template>
        <div class="ui feed">
            <Tweet
                v-for="tweet in tweets"
                :key="tweet.id"
                :tweet="tweet"
            />
        </div>
    </template>
    
    <script>
        import Tweet from '@/components/Tweet/Tweet'
    
        export default {
            name: 'Tweets',
            components: {
                Tweet
            },
            props: {
                tweets: {
                    type: Array,
                    required: true
                },
                authUser: {
                    type: Object,
                    required: true
                }
            }
        }
    </script>

    We import the Tweet component. It accepts an array of tweets and the authenticated user as props. The component simply render the Tweet component. Recall that the Tweet component accept a tweet as props. So, we loop through the array of tweets and pass each tweet to the Tweet component as props.

    Chimezie Enyinnaya

    16 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com