Managing data

Before we can process the data we get from GitHub we need to decide who is responsible for holding the data.

The simplest approach we can take is to move the data in the component that is parent to every component that is going to use the data. The data is going to be shared between Form and CardList, so the only reasonable place to host it is the App component, the top component.

We add a data property in the component, which is a function that returns an object that contains an empty cards array:

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

export default {
  name: 'app',
  data: function() {
    return {
      cards: []
    }
  },
  components: {
    Form
  }
}
</script>

In addition we are going to add a method, which we’ll call handleGitHubData(). This method has the responsibility of adding a user’s data to the cards array.

Here’s its implementation:

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

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

Now we can pass this method as a prop to the Form component:

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

and we have the ability to call it inside the Form component.

In the Form component we first register the handleGitHubData function as a prop:

<script>
import axios from 'axios'

export default {
  name: 'Form',
  data: function() {
    return {
      username: ''
    }
  },
  props: {
    handleGitHubData: Function
  },
  methods: {
    addUser: function() {
		 //...
    }
  }
}
</script>

Let’s now get back to our addUser() method. In it, we’ll add this function, that asks the data, then calls the handleGitHubData() function passing the data from the GitHub response.

Finally, we clear the username data value, so we can add another user card next:

axios.get(`https://api.github.com/users/${this.username}`).then(resp => {
  this.handleGitHubData(resp.data)
  this.username = ''
})

---

Go to the next lesson