Rumah > Soal Jawab > teks badan
Saya menghantar permintaan API dan mendapat bilangan peserta yang berbeza (dari 1 hingga 5). Berdasarkan nombor ini, bilangan ikon yang sepadan hendaklah dipaparkan dalam kotak modal. Jika terdapat 3 peserta, perlu ada 3 ikon pengguna dalam modal. Saya tahu cara melakukannya dalam React, tetapi saya mula belajar Vue3 dan tidak tahu cara melakukannya.
<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>
Dalam React, saya akan menulis seperti ini. Tetapi bagaimana untuk menulis semula dalam Vue? Mari kita jelaskan, di mana ia harus diletakkan?
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; });
P粉6474494442024-01-11 13:52:23
Terima kasih kepada bantuan @tho-masn, saya dapat memahami dan menulis semula sifat yang dikira
numberOfParticipants () { let participants = 1 for(let i=1; i < this.randomActivity.participants; i++) { participants += 1; } return participants }
P粉4349968452024-01-11 09:05:25
Mula-mula, anda perlu mencipta sifat terkira yang mengembalikan bilangan peserta (kaunter gelung x
).
Anda kemudian menjalankan gelung x
kali menggunakan sifat yang dikira itu.
Adakah ini yang anda ingin capai?
<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>