<template>
    <div>
        <table>
            <tr v-for="contact in contacts">
                <td>{{contact.firstname}}</td>
                <td>{{contact.lastname}}</td>
            </tr>
        </table>
        <button @click="addContact">Add</button>
        <label>#contacts {{counter}}</label>
    </div>
</template>

<script>
    // la balise script dans ce fichier vue, est un peu comme une classe Contacts
    // namespace components/Contacts
    import Vue from 'vue'
    import VueResource from 'vue-resource'

    // injection de dépendance pour dealer du REST json
    Vue.use(VueResource)

    export default{
        // initialise les données
        data () {
            return {
                // constructeur du tableau-objet vide 'contacts' qui est passé à App.vue
                contacts: []
            }
        },
        // Rest GET json
        http: {
            root: 'http://localhost:3000'
        },
        // méthodes
        methods: {
            addContact(){
                this.contacts.push({"firstname":"Lisa", "lastname":"Simpson", "age":"10"})
            }
        },
        // traitements
        computed:{
            counter(){
                return this.contacts.length
            }
        },
        // on dirait un setter
        mounted() {
            this.$resource('contacts').get().then((response) => {
                this.contacts = response.data
            }, (response) => {
                console.log('erreur', response);
            })
        }
    }
</script>

<style>
</style>
