0

我正在尝试遍历一个组件，我用一些数据填充了插槽，但它们渲染得不好。

奇怪的行为：

  • 数据显示但不可见。
  • 在 chrome 中，如果我device toolbar在调试面板中切换，数据现在可见。
  • 在调试面板中更改字体大小使我的数据可见
  • 当我将子组件放在循环之外时，循环的组件会很好地呈现。

来自我的父组件的片段：

<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-代表问题？感谢您分享您的想法。

4

0 回答 0