Question

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

奇怪的行为：

显示数据但不可见。
在Chrome中，如果我在调试面板中切换device toolbar，则数据现在可见。
在调试面板中更改字体大小，使我的数据可见
当我将一个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问题？谢谢你分享你的想法。

插槽在子组件VueJS上不能很好地呈现

0 个答案: