Découvrir Vue.js 2

Créer un index dans une boucle

Testez gratuitement nos 1304 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Chaque objet de la boucle est unique. Pour manipuler un seul objet, vous devrez d'abord l'identifier à l'aide de l'index.
04:40

Transcription

Dans certains frameworks que vous utilisez peut-être déjà ou que vous avez utilisé, dans les boucles comme ça, on a la possibilité de récupérer l'index de boucle. Il faut savoir qu'avec la dernière version de Vue, vous ne pouvez plus le faire. Il va falloir obligatoirement que vous puissiez avoir de coté, une information qui va être intéressante et qui va vous permettre de traquer. Alors je vous explique un petit peu comment ça va fonctionner. On a, en fait, ici, une propriété qui s'appelle < qui va être récupérée par v-bind. Donc, du coup, le v-bind qu'on a là, on est pas obligé de le mettre, vous vous souvenez, donc <<:Key. Par contre, il va falloir obligatoirement récupérer cette information. Alors ça, c'est utile ou pas, mais en fait, il faut obligatoirement que vous ayez un identifiant si vous voulez pouvoir identifier dans un ray le message par exemple. Alors ça, pour nous c'est un peu embêtant parce que c'est pas du tout comme ça qu'on le gère. Ce que l'on va faire, c'est que l'on va se créer une méthode. On va se créer une méthode qui permette d'ajouter un message. Donc, addLog, on va appeler ça addLog, puis on va faire une fonction, comme ça, et puis cette fonction, elle va nous permettre d'ajouter, donc à chaque fois on va l'appeler, et elle va nous permettre d'ajouter le message, donc addLog message, comme ça. Et on va simplement faire un < et on va insérer des objets. Ca va être plus intéressant pour nous d'insérer des objets. Ces objets, qu'est-ce qu'ils vont avoir? Eh bien, ils vont avoir un identifiant. Donc on va faire <, ou plutôt <, ici, et on va leur donner un identifiant. Et puis, ils vont avoir aussi un message. Donc, le message, ça va être le message qui sera passé, voilà, on ve le mettre comme ça, et l'id, ça va être <. Pourquoi, parce que click, actuellement, pour nous, c'est une valeur qui va évoluer. Alors, est-ce que c'est intéressant de faire comme ça? Oui et non, parce que le click en fait, va pouvoir redescendre. Vous voyez, donc , ça on est un petit peu embêté, le mieux ce serait carrément de récupérer ici, la taille de la collection. This.collection. et puis on peut faire <<.lens, comme ça, et de lui ajouter <<+ 1. Voilà, comme ça on aura un identifiant unique, et comme les messages restent tous, on va avoir un identifiant qui va être ajouté à chaque fois. C'est plus intéressant de le gérer comme ça. Maintenant, il va falloir que cette fonction on l'appelle absolument partout. Donc, <, ici, on va plutôt faire <, comme ça, avec le message. Et ça, on va le répercuter absolument partout où on a des messages et comme ça on va juste venir ajouter le message à chaque fois, addLog, addLog, addLog, et là, comme ça, on va être un petit peu plus tranquille, et on va pouvoir avoir une interface qui fonctionne et surtout qui vient nous afficher et nous ajouter des informations. Alors, attention, parce que vu qu'on a ajouté une propriété, ça veut dire que l'item ici, eh bien il va falloir le modifier, parce que c'est le message que l'on veut afficher. Si vous voulez voir l'id pour être certain qu'on pourrait récupérer cet identifiant et qu'on pourrait l'utiliser, vous pouvez ici, composer, tout simplement, voilà, un petit message, et puis comme ça vous allez avoir l'identifiant de l'item, et le message à la fin. Et vous pouvez savoir en plus, où vous en êtes réellement, combien de clicks en tout, même si le score est un petit peu différent. Maintenant on va retourner dans notre interface, Vue.js. On va faire attention, parce qu'on a <, donc on a un this avec < qui se glisse quelque part, qui se trouve là. Voilà. Celui-ci on va le modifier. Vous voyez que c'est bien, on a des messages quasiment tout le temps, et donc là, regardez, c'est parti, on est bon, ça va fonctionner. Et là on a bien des identifiants uniques à chaque fois pour chaque message. Donc, le premier, deuxième, le troisième, le quatrième, même si pour le coup, mon score redescend, je sais à combien de clics j'en suis, réellement et je sais aussi récupérer un identifiant pour un message, si jamais j'ai besoin de travailler avec. Donc si vous avez besoin de travailler sur un item de votre collection, pensez bien à venir récupérer un identifiant et à le stocker, ça vous permettra, pourquoi pas, de venir le récupérer automatiquement. Sachez que le plus simple qu'on a là, est pas forcément utile, pourquoi? Parce que pour le coup, le premier item dans la collection, c'est le 0. Donc je vous conseille même de ne pas mettre le plus 1, pour avoir vraiment un message qui soit à 0 directement, qui sera vraiment le premier item de la collection, ça, ça va vous permettre de travailler dessus, et pourquoi pas de venir travailler et faire des choses supplémentaires sur vos objets dans une collection. Donc, pas d'index de boucle sur Vue.js de base. Pas besoin, en fait, de les traquer, c'est fait automatiquement. Même si vous faites une modification sur la collection, que vous allez changer les infos ou quoi, la collection, elle est traquée, elle est reconstruite, tout ça, c'est fait de façon très intelligente par Vue.js. Donc pas besoin de s'embêter avec des directives supplémentaires, pour lui dire de faire des track-by ou autre, ce qu'on pouvait retrouver dans d'autres frameworks, et notamment dans la version 1 de Vue.Js, ça n'existe plus.

Découvrir Vue.js 2

Animez et rendez réactive la vue d’une application web avec le framework Vue.js. Mettez en place les interfaces web de demain​ ​et utilisez les librairies externes de votre choix.

2h25 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Vue.js Vue.js 2.1
Spécial abonnés
Date de parution :14 févr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !