vue.js - 子コンポーネント VueJS でスロットがうまくレンダリングされない

Question

コンポーネントをループしようとしています。スロットにデータを入力しましたが、うまくレンダリングされません。

奇妙な振る舞い :

• データは表示されますが、表示されません。
• device toolbarChromeでデバッグ パネルを切り替えると、データが表示されるようになりました。
• デバッグ パネルでフォント サイズを変更すると、データが表示されます
• Child コンポーネントをループの外側に配置すると、ループされたコンポーネントが適切にレンダリングされます。

私の親コンポーネントからのスニペット:

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

親コンポーネントでこの方法でデータを取得します。

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

これはライフフックの問題ですか？代わりに Scoped スロットを使用する必要がありますか? V-for issue ? あなたの考えを共有してくれてありがとう。