Display the cards

Now we are ready to display the list of cards added through the form.

Create a new component called CardList, under src/components/CardList.vue.

In src/App.vue, import it just like you did for the Form component, and add it to the components property of the component JS, so we can use it in the template:

<script>
import Form from './components/Form.vue'
import CardList from './components/CardList.vue'

export default {
  name: 'app',
  data: function() {
    return {
      cards: []
    }
  },
  components: {
    Form,
    CardList
  },
  methods: {
    handleGitHubData(data) {
      this.cards.push(data)
    }
  }
}
</script>

Now you can add it to the template. While we are here, since the component needs to display the cards, we are going to pass them to it as a prop:

<template>
  <div id="app">
    <Form :handleGitHubData=handleGitHubData />
    <CardList :cards=cards />
  </div>
</template>

In the CardList.vue component file, we can start by adding the script tag and declaring the prop as an array:

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'CardList',
  props: {
    cards: Array
  }
}
</script>

Now before going on we need to create a new component, Card

---

Go to the next lesson