在Vue中如何根据数据增加图标数量-PHP中文网问答

我发送了一个API请求并获得了不同数量的参与者（从1到5）。根据这个数量，在模态框中应该显示相应数量的图标。如果有3个参与者，则模态框中应该有3个用户图标。我知道如何在React中实现，但我开始学习Vue3，不知道该怎么做。

<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>

在React中，我会这样写。但在Vue中该如何重写？明确一下，应该放在哪里？

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;
  });

numberOfParticipants () { let participants = 1 for(let i=1; i < this.randomActivity.participants; i++) { participants += 1; } return participants }

<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>