recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment augmenter le nombre d'icônes en fonction des données dans Vue

J'ai envoyé une demande API et j'ai obtenu un nombre différent de participants (de 1 à 5). Sur la base de ce nombre, un nombre correspondant d'icônes doit être affiché dans la boîte modale. S'il y a 3 participants, il devrait y avoir 3 icônes utilisateur dans le modal. Je sais comment le faire dans React, mais je commence à apprendre Vue3 et je ne sais pas comment le faire.

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

Dans React, j'écrirais comme ça. Mais comment le réécrire dans Vue ? Soyons clairs, où faut-il le placer ?

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粉832490510P粉832490510382 Il y a quelques jours435

répondre à tous(2)je répondrai

  • P粉647449444

    P粉6474494442024-01-11 13:52:23

    Grâce à l'aide de @tho-masn, j'ai pu comprendre et réécrire les propriétés calculées

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

    répondre
    0
  • P粉434996845

    P粉4349968452024-01-11 09:05:25

    Tout d'abord, vous devez créer une propriété calculée qui renvoie le nombre de participants (le compteur de la boucle x).

    Vous exécutez ensuite la boucle x fois en utilisant cette propriété calculée.

    Est-ce ce que vous souhaitez réaliser ?

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

    répondre
    0
  • Annulerrépondre