Rexecuter l'affichage de composant

Bonjour à tous,
je me permet de créer un sujet pour avoir une explication.
Dans mon App.vue j’affiche un composant “carte” un certains nombre de fois via un v-for
Dans ce composant carte dans beforeMount j’ai une fonction qui fait appel a une api qui récupère une photo que je mets en background de la carte.
Dans mon App.vue j’ai un bouton qui me modifie le tableau que j’utilise dans le v-for. Mon objectif est que quand je clique sur ce bouton il me régénère toutes les cartes. Or dans mon cas, initialement mon tableau a 8 entrées, mes cartes sont biens créées avec chacune une photo. Quand je clique sur mon lien cela régénère mon tableau avec plus que 3 entrées.
L’affichage est bien modifié j’ai plus que 3 cartes d’afficher mais les images n’ont pas été mise a jour.

Comment faire pour que a chaque clique sur le bouton cela rééxecute mes appels a l’api qui sont dans mon composant carte ?
Merci d’avance !

EDIT: Mon code : brave-monad-px42p - CodeSandbox

salut

en fait, vue optimise les re-render des listes avec les valeurs de v-bind:key (sur v-for)
tu peux forcer vue à recréer des nouveaux composants en t’assurant que tous les éléments ont des :key différentes

exemple : relaxed-sid-q5fev - CodeSandbox

1 Like

Bonjour matxx,
effectivement en mettant un uid en clé ca résoud le problème !!
merci et désolé pour le retour tardif