久久久久久亚洲精品成人,在线天堂最新版资源,亚洲自偷精品视频自拍

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

我發(fā)送了一個(gè)API請(qǐng)求並獲得了不同數(shù)量的參與者（從1到5）。根據(jù)這個(gè)數(shù)量，在模態(tài)框中應(yīng)該會(huì)顯示對(duì)應(yīng)數(shù)量的圖示。如果有3個(gè)參與者，則模態(tài)框中應(yīng)該有3個(gè)使用者圖示。我知道如何在React中實(shí)現(xiàn)，但我開始學(xué)習(xí)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中，我會(huì)這樣寫。但在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>