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

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

Parent ponent:

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

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

An exmaple child ponent like "show-1":

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

This code below is in blade for rendering wrapper ponent with a dynamic child ponent 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 ponent should be changed too. How could I do this ?

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

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

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

Parent ponent:

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

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

An exmaple child ponent like "show-1":

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

This code below is in blade for rendering wrapper ponent with a dynamic child ponent 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 ponent should be changed too. How could I do this ?

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

• javascript
• laravel
• vuejs2
• laravel-5.4
• vue-ponent

2 Answers 2

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

You can use the same mount point and dynamically switch between multiple ponents 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 : -->
            <ponent v-if="view" :is="view"></ponent >
        </div>
        <div class="card-footer"></div>
    </div>
</template>

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

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

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

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

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

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