Vue.js 插槽没有'；无法在子组件VueJS上很好地渲染

我试图在一个组件上循环，我用一些数据填充了这个插槽，但它们的渲染效果不好

奇怪的行为：

• 数据显示但不可见
• 在chrome中，如果我在调试面板中切换

  设备工具栏

  ，数据现在可见
• 在“调试”面板中更改字体大小可使我的数据可见
• 当我把一个子组件放在循环外时，循环的组件被很好地渲染

来自父组件的代码段：

<li class="cards__item" v-for="(staffMember, index) in staff">
   <card-profil>
       <h3 slot="title">{{staffMember.name}}</h3>
   </card-profil>
</li>

<template>
    <section class="card-profil">
        <figure class="fig-card-profil">
            <figcaption class="figcaption-card-profil">
                <slot name="title"></slot>
            </figcaption>
        </figure>
    </section>
</template>

这是救生钩的问题吗？我必须使用作用域插槽吗？V-for问题？

---

谢谢分享你的想法

您确定这不是CSS问题或类似的问题，因为它在DOM中呈现得非常好，感谢jsbin@BelminBedak。我保证这不是css问题。我只是在循环外测试一个子组件，一切正常。渲染它也没有困难。您的问题不在提供的示例范围内。奇怪，我不知道可能是什么问题。如果您可以通过Inspector查看DOM中呈现的项目，我很确定这是CSS的问题。你有可能对你大喊大叫吗？

export default {
    data: function () {
        return {
            staff: []
        }
    },
    mounted () {
        this.getStaff()
    },
    methods: {
        getStaff: async function () {
            const staff = await axios({ url: 'https://randomuser.me/api/?results=8' })
            this.staff = staff.data.results
        }
      }
    }