Ich habe eine API-Anfrage gesendet und eine unterschiedliche Anzahl von Teilnehmern erhalten (von 1 bis 5). Basierend auf dieser Anzahl sollte eine entsprechende Anzahl von Symbolen in der Modalbox angezeigt werden. Bei 3 Teilnehmern sollten im Modal 3 Benutzersymbole vorhanden sein. Ich weiß, wie man das in React macht, aber ich fange an, Vue3 zu lernen und weiß nicht, wie man das macht.
<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>
In React würde ich so schreiben. Aber wie kann man es in Vue umschreiben? Lassen Sie uns klarstellen: Wo soll es platziert werden?
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;
}); 
感谢 @tho-masn 的帮助，我能够理解并重新编写计算属性
numberOfParticipants () { let participants = 1 for(let i=1; i < this.randomActivity.participants; i++) { participants += 1; } return participants }首先，您需要创建一个计算属性，该属性返回参与者的数量（循环的计数器
x）。然后，您使用该计算属性运行循环
x次。这是您想要实现的吗？
<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>