CODEWITHSUNDEEP
javascriptlaravelvuejs2laravel-5.4vue-component
Hanik
Hanik

Reputation: 327

Dynamically add a child component in Vue JS

I need some help in Vue JS and Laravel with adding a child vue component.

I have a parent component called "wrapper" and some child components called like "show-1", "show-2", "show-3" ... etc.

Parent component:

<template>
    <div class="card border-light">
        <div class="card-header">
            <h5 class="title">{{ title }}</h5>
        </div>
        <div class="card-body">
            <component
                is="view"
            ></component >
        </div>
        <div class="card-footer"></div>
    </div>
</template>

<script>
export default {
    props : ['title'],
    data() {
        return {
            view : ''
        }
    }
}
</script>

An exmaple child component like "show-1":

<template>
    <div> show-1 </div>
</template>

This code below is in blade for rendering wrapper component with a dynamic child component name:

<wrapper
title="Example"
view="show-1"
></wrapper>

This code is not working but if i change the parent view data "show-1" instead of empty, it works. why ?

When I change the view prop, child vue component should be changed too. How could I do this ?

I want to pass the view attribute to parent component dynamically.

Upvotes: 1

Views: 11405

Answers (2)

user320487
user320487

Reputation:

@Eduardo has the right answer. To add to it, import your components into the parent and switch between them via a data property:

...
<component :is="current"></component >
...

data: {
  current: 'show1'
},
components: {
  show1: Show1Component,
  show2: Show2Component,
  show3: Show3Component
}

The key is to bind the component using the name of the dynamic component.

https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

Upvotes: 1

E. S.
E. S.

Reputation: 2919

You can use :is attribute. You can read more about it here: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

You can use the same mount point and dynamically switch between multiple components using the reserved element and dynamically bind to its is attribute....

<template>
    <div class="card border-light">
        <div class="card-header">
            <h5 class="title">{{ title }}</h5>
        </div>
        <div class="card-body">
            <!-- make sure to use : -->
            <component v-if="view" :is="view"></component >
        </div>
        <div class="card-footer"></div>
    </div>
</template>

<script>
export default {
    props : ['title'],
    data() {
        return {
            view : ''
        }
    }
}
</script>

Upvotes: 3

Related Questions