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:

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

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:

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:

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  :

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

 

Laisser un commentaire