我发送了一个API请求并获得了不同数量的参与者（从1到5）。根据这个数量，在模态框中应该显示相应数量的图标。如果有3个参与者，则模态框中应该有3个用户图标。 我知道如何在React中实现，但我开始学习Vue3，不知道该怎么做。
参与者：
在React中，我会这样写。但在Vue中该如何重写？明确一下，应该放在哪里？
2
1005const participants = [
{userIcon}
,
];
randomActivity.map((item) => {
for (let i = 1; i < item.participants; i++) {
participants.push(
{userIcon}
);
}
return participants;
}); 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
感谢 @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>