Vue3如何根据接口获取的参与者数量动态渲染对应个数的UserIcon

完整实现代码 #

<template>
  <p>
    Participants:
    <span v-for="n in randomActivity.participants" :key="`personIcon${n}`" class="inline-block"> 
      <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声明位置
  props: {
    randomActivity: {
      type: Object,
      required: true,
    }
  }
})
</script>

改动说明 #

1. 修正了script部分的props声明：你原有代码里的randomActivity属性位置错误，Vue3的defineComponent配置中，父组件传入的参数需要统一放在props字段下声明。
2. 模板层直接用Vue内置的v-for列表渲染指令实现需求：Vue支持v-for="n in 数字"的写法，会自动循环n次（数值从1到你给定的数字），刚好匹配1~5个参与者的渲染需求，不需要像React一样在JS逻辑里手动构造图标数组，模板层就能直接完成渲染，绑定key属性保证唯一性即可。

内容的提问来源于stack exchange，提问作者Festina