Publication d’article + image VueJS !

Bonjour à tous et à toutes, c’est toujours moi pour la suite de notre projet VueJS !

Souvenez vous la dernière fois nous avions vu comment faire notre navbar et y ajouter des icônes aujourd’hui nous allons voir comment ajouter une photo avec une description et une date d’ajout.

C’est super nan ? Ouais, je sais, c’est super merci !

Ajouter des images dans votre dossier img pour qu’on puisse ajouter des photos par la suite

Tout d’abord créons un fichier publication.json dans le dossier src/data dans lequel il y aura toutes nos données, c’est-à-dire notre titre notre date de publication et l’appel de nos images.

Voici de quoi sera composer notre fichier vous pouvez ajouter autant de données que vous voulez faites comme bon vous semble vous n’êtes pas obliger de respecter à la lettre ce que j’ai écrit !

Une fois les données ajoutées, nous pouvons faire appel à ces dernières pour quel soit affiché sur notre page. (heureusement sinon ça sert à rien lol)

Nous allons importer nos données avec un import basique.

Certes, il y a du code qui ne nous sera pas utile tout de suite, mais on va en avoir besoin par la suite.

Continuons !

Dans notre fichier App.vue nous allons importer nos données comme ceci

Vous avez tout recopié ? Bien voyons voir ce que ça donne !

Voilà un premier post comme exemple et si on défile notre page, nous voyons les autres

Cet article est déjà fini, nous sommes aller droit au but comme… (je vous laisse finir cette phrase en commentaire haha.)