Vue.js partie 2
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.