Question

pls，我试图在vue中动态添加一些组件，以便我可以轻松创建一些选项卡，所有组件都存储在一个数组中，但是当我遍历每个组件时，它会显示这些组件的名称组件的内容，下面是我的代码

item

<template>
    <v-card>
       <v-tabs color="#4FC3F7"  slider-color="#004D40" right grow>
            <v-tab ripple v-for="(ttab, index) in tabss" :key="index">{{ttab}}</v-tab>
            <v-tab-item v-for="(tabCont, index) in tabConts" :key="index">
                {{tabCont}}
            </v-tab-item>  
            </v-tabs>
    </v-card>
</template>

请问我在做什么错事

Answer 1

对于初学者来说，tabConts只是一个字符串数组，因此您可以找到所需的内容。

您可能想使用“组件”组件，该组件可让您指定要插入的组件名称作为属性：

<component v-bind:is="componentName"></component>

因此您的模板将变为以下内容：

<template>
    <v-card>
       <v-tabs color="#4FC3F7"  slider-color="#004D40" right grow>
            <v-tab ripple v-for="(ttab, index) in tabss" :key="index">{{ttab}}</v-tab>
            <v-tab-item v-for="(tabCont, index) in tabConts" :key="index">
                <component :is="tabCont"></component>
            </v-tab-item>  
            </v-tabs>
    </v-card>
</template>

这假定组件正在正确地注册自己，等等，但这应该使您更接近解决方案。

动态添加Vue组件

1 个答案: