VueJs: Using component inside another component

Question

I'm trying to make use of the main component inside another with pre-defined properties.

Here's what I'm trying to achieve, but I'm just getting an empty div as a result.

<template>
    <call-dialog-link
        :id="id"
        :url=url"
        message="Are you sure you wish to remove this record?"
        label="Remove"
        css-classes="alert"
    ></call-dialog-link>
</template>
<script>
    import CallDialogLink from './CallDialogLink.vue';
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            }
        },
        components: {
            'call-dialog-link': CallDialogLink
        }
    };
</script>

Here's the CallDialogLink component

<template>
    <span class="clickAble" :class="cssClasses" v-text="label" @click="clicked()"></span>
</template>
<script>
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            },
            message: {
                type: String,
                required: true
            },
            label: {
                type: String,
                required: true
            },
            cssClasses: {
                type: String,
                required: false
            }
        },
        mounted() {
            window.EventHandler.listen('remove-dialog-' + this.id + '-called', (data) => {
                window.location.reload(true);
            });
        },
        methods: {
            clicked() {
                window.EventHandler.fire('top-confirm', {
                    id: 'remove-dialog-' + this.id,
                    message: this.message,
                    url: this.url
                });
            }
        }
    };
</script>

Any idea what I'm doing wrong?

message, label, css-classes dont have property binding on them? — Amresh Venugopal
– Amresh Venugopal, Commented Feb 16, 2017 at 9:46
They are just static props, which I'm passing through to the CallDialogLink from within this component. As they are just strings, I don't have to use dynamic binding. — Sebastian Sulinski
– Sebastian Sulinski, Commented Feb 16, 2017 at 9:48
Then you aren't doing anything wrong, can you just console.log in the created hook if the <call-dialog-link> component if you are receiving those props? — Amresh Venugopal
– Amresh Venugopal, Commented Feb 16, 2017 at 9:52
I did, but it looks as if it's not being called at all - nothing in the console. — Sebastian Sulinski
– Sebastian Sulinski, Commented Feb 16, 2017 at 9:55
Try wrapping this up in a <div>? also, could you please post the code for the <call-dialog-link> — Amresh Venugopal
– Amresh Venugopal, Commented Feb 16, 2017 at 10:01

krisanalfa · Accepted Answer · 2017-02-16 10:39:13Z

11

I believe there is typo in your code.

<template>
    <call-dialog-link
        :id="id"
        :url="url" // didn't open the double quote here
        message="Are you sure you wish to remove this record?"
        label="Remove"
        css-classes="alert"
    ></call-dialog-link>
</template>

edited Feb 16, 2017 at 10:39

krisanalfa

6,4482 gold badges32 silver badges39 bronze badges

answered Feb 16, 2017 at 10:29

Srinivas Damam

3,0652 gold badges20 silver badges26 bronze badges

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

2 Comments

Sebastian Sulinski Over a year ago

You're a life saver! Bloody typos. Thanks very much.

blakroku Over a year ago

You were not sure whether it worked, if you knew what you were doing was right, you would have checked over to be sure, but you would come over it with time.

Collectives™ on Stack Overflow

VueJs: Using component inside another component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related