时间戳

首页 > 解决方案 > 从相同的插槽名称动态渲染组件

vue.js - 从相同的插槽名称动态渲染组件

问题描述

所以我正在制作一个简单的步进器。我的结构是这样的：

<stepper :steps="steps">
    <template slot="stepper:step">
        <div class="">
            {{ first }}
        </div>
    </template>
    <template slot="stepper:step">
        <div class="">
            {{ second }}
        </div>
    </template>
</stepper>

export default {
    data: () => ({
        steps: [
            { name: 'First step' },
            { name: 'second step' },
        ],
        first: 'First content',
        second 'second content',
    })
}

我的步进器是这样的：https ://gist.github.com/natecorkish/81e22edb9e41348e579b705c3a4d3e54

我的步骤是这样的：https ://gist.github.com/natecorkish/45108d046ddc7d116110c973b608a774

现在，渲染内容时出现错误：

vue.runtime.esm.js?2b0e:1888 TypeError: Converting circular structure to JSON --> 从带有构造函数'Object'的对象开始---属性'_renderProxy'在JSON.stringify()处关闭圆圈

我已经尝试过VueJS Render VNode但这只会渲染我的几个 div/输入。那么，从我的代码来看，我该如何解决这个问题？

标签： vue.jsvuejs2

解决方案

推荐阅读