J'utilise VUE.JS sur mon front-end et que vous avez le code suivant:
<div class='participant' v-for='(participant, index) in match.details.participants'>
<div class='items'>
<img :src="'http://ddragon.leagueoflegends.com/cdn/9.13.1/img/item/' + participant.stats.item0 + '.png'" alt="">
<img :src="'http://ddragon.leagueoflegends.com/cdn/9.13.1/img/item/' + participant.stats.item1 + '.png'" alt="">
<img :src="'http://ddragon.leagueoflegends.com/cdn/9.13.1/img/item/' + participant.stats.item2 + '.png'" alt="">
<img :src="'http://ddragon.leagueoflegends.com/cdn/9.13.1/img/item/' + participant.stats.item3 + '.png'" alt="">
<img :src="'http://ddragon.leagueoflegends.com/cdn/9.13.1/img/item/' + participant.stats.item4 + '.png'" alt="">
<img :src="'http://ddragon.leagueoflegends.com/cdn/9.13.1/img/item/' + participant.stats.item5 + '.png'" alt="">
</div>
</div>
3 Réponses :
De vos descriptions, je suppose que vos participants ressemblent à ceci: Si vous modifiez les statistiques pour également être une matrice, vous pouvez utiliser cette boucle que vous dites. Il n'y a pas vraiment de raison d'avoir un objet avec 6 propriétés nommées 0 à 5, car c'est fondamentalement un tableau. P> Donc, je voudrais utiliser: P> [
{ name: "yasio", stats: [
{ name: "renewable potion", damage: -150 },
{ name: "long sword", damage: 10 }
]},
{ name: "master yu", stats: [
{ name: "BF sword", damage: 40}
]}
];
Le problème est que je dessine ces informations d'un fichier JSON sur lequel je n'ai aucun contrôle.
Vous devez utiliser un en utilisant ES6: V-pour avec une plage, comme celui-ci: v-for < / Code> Avec une plage de Vue Démarrer à 1, c'est pourquoi vous devriez dire (i-1)
La boucle supplémentaire pour la boucle n'est pas nécessaire car il est déjà en boucle sur les participants. Il peut utiliser l'index. Voir ma réponse.
Mais alors, il n'y aurait qu'une seule image à l'intérieur de «articles» à droite? Je crois que ce n'est pas ce qu'il veut, mais peut-être que je me trompe et que votre code bougeait la balise IMG?
Non, parce qu'il boucle déjà sur le match.destails.Paridiments pour chaque participant qu'il utilise pour obtenir l'image.
Il veut 6 images pour chaque participant, cependant.
Si c'est le cas, alors ma réponse est vraiment fausse. Je pensais qu'il veut juste une image par participant. Je vais éditer le mien.
Comme vos statists.Item commence avec 0, nous faisons index - 1 code> comme index dans VUE 2.x commence à partir de 1. Vous pouvez l'utiliser comme suit: <div class='participant' v-for='(participant, index) in match.details.participants'>
<div class='items'>
<img :src="`http://ddragon.leagueoflegends.com/cdn/9.13.1/img/item/${participant.stats.item}${index - 1}.png`" alt="">
</div>
</div>