J'ai envoyé une demande API et j'ai obtenu un nombre différent de participants (de 1 à 5). Sur la base de ce nombre, un nombre correspondant d'icônes doit être affiché dans la boîte modale. S'il y a 3 participants, il devrait y avoir 3 icônes utilisateur dans le modal. Je sais comment le faire dans React, mais je commence à apprendre Vue3 et je ne sais pas comment le faire.
<template>
<p>
参与者：
<span>
<UserIcon />
</span>
</p>
</template>
<script lang="ts">
import { defineComponent } from '@vue/runtime-core';
import {HeartIcon, UserIcon, XIcon } from '@heroicons/vue/solid'
export default defineComponent({
name: 'NewActivityModal',
components: {HeartIcon, UserIcon, XIcon},
props: {
randomActivity: {
type: Object,
required: true,
}
},
})
</script>
Dans React, j'écrirais comme ça. Mais comment le réécrire dans Vue ? Soyons clairs, où faut-il le placer ?
const participants = [
<span>
{userIcon}
</span>,
];
randomActivity.map((item) => {
for (let i = 1; i < item.participants; i++) {
participants.push(
<span className="inline-block" key={`personIcon${i}`}>
{userIcon}
</span>
);
}
return participants;
}); 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Grâce à l'aide de @tho-masn, j'ai pu comprendre et réécrire les propriétés calculées
numberOfParticipants () { let participants = 1 for(let i=1; i < this.randomActivity.participants; i++) { participants += 1; } return participants }Tout d'abord, vous devez créer une propriété calculée qui renvoie le nombre de participants (le compteur de la boucle
x).Vous exécutez ensuite la boucle
xfois en utilisant cette propriété calculée.Est-ce ce que vous souhaitez réaliser ?
<template> <p> 参与者： <span v-for="counter in numberOfParticipants" :key="counter" > <UserIcon /> </span> </p> </template> <script lang="ts"> import { defineComponent } from '@vue/runtime-core'; import {HeartIcon, UserIcon, XIcon } from '@heroicons/vue/solid' export default defineComponent({ name: 'NewActivityModal', components: {HeartIcon, UserIcon, XIcon}, props: { randomActivity: { type: Object, required: true, } } }, computed: { numberOfParticipants () { return randomActivity .map(item => { return item.participants }) .flat() .length } } }) </script>