Allons un peu plus loin en ajoutant un formulaire et une collection de livre.

Commençons par Vue.js. Pour ajouter un livre à une collection, il nous faut donc une collection de livre, un tableau feras l’affaire:

data: {
        livre: {nom: '', commentaire: '', lu: ''},
        livres: []
    }

Afin de commencer avec de livre, nous utilisons la fonction suivante qui est appelé lors de l’instanciation de Vue.js:

ready: function() {
    var livres = [
        { nom: 'Fondation', commentaire: 'Un bon livre de SF', lu: '12-03-2016'}
    ];
    this.$set('livres', livres);
}

Il nous reste une dernière chose a faire en Javascript, l’ajout d’un nouveau livre lors de l’envoie du formulaire. pour cela nous définissons une fonction qui vérifie que le livre que l’on veux ajouter à bien un nom, puis nous l’ajoutons a notre tableau et enfin réinitialisons le formulaire:

methods: {
    ajouterLivre: function() {
        if(this.livre.nom) {
            this.livres.push(this.livre);
            this.livre = {nom: '', commentaire: '', lu: ''};
        }
    }
}

Passons maintenant que html. De côté là, la première chose et d’ajouter un bouton qui va faire appelle a notre fonction Javascript:

<button v-on:click="ajouterLivre">Ajouter</button>

La syntaxe v-on:click= »ajouterLivre »  permet de dire à Vue.js d’invoquer la fonction ajouterLivre lors de l’événement click.

Dernière étape, afficher notre collection de livres. Pour cela nous allons itéré sur notre tableau et afficher chacun de livres en utilisant v-for  :

<div v-for="livre in livres">
    <h2>{{ livre.nom }}</h2>
    <p>{{ livre.commentaire }}</p>
    <p>{{ livre.lu }}</p>
</div>

Et voila, avec un peu de css vous pouvez voir ça ici.