Dynamically adding vue components

Question

pls, am trying to add some components dynamically in vue so that i can easily create some tabs, the components are all stored in an array, but when i looped through each of those components, it displayed the name of the components instead of the content of the components, below is my code

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

<script>
  import ProfileComponents from './Profile.vue' 
  import PasswordsComponents from './Passwords.vue' 
  import ProjectsComponents from './Projects.vue' 
  import FiniancialsComponents from './Finiancials.vue' 
  import VerificationsComponents from './Verifications.vue'
    export default {
        data() {
            return {
                tabss:['Profile','Passwords','Projects','Finiancials','Verifications'
                ],
                tabConts:['<ProfileComponents/>','<PasswordsComponents/>','<ProjectsComponents/>','<FiniancialsComponents/>','<VerificationsComponents/>'
                ],
            };
        },
        components:{
            ProfileComponents, PasswordsComponents, ProjectsComponents, FiniancialsComponents, VerificationsComponents
        }
    }
</script>

pls what am i doing wrong

You are using the tabCont as a string. Use it as html. v-html="tabCont" — Socrates Tuas
– Socrates Tuas, Commented Nov 10, 2018 at 5:53

Jim B. · Accepted Answer · 2018-11-10 04:34:30Z

1

For starters, tabConts is just an array of strings, so you're getting what you are asking for.

You probably want to use the 'component' component, which lets you specify the name of the component to insert as a property:

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

So your template changes to something like this:

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

This assumes the components are registering themselves correctly, etc., but this should get you closer to a solution.

answered Nov 10, 2018 at 4:34

Jim B.

4,7944 gold badges32 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically adding vue components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related