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?

Misha

message, label, css-classes dont have property binding on them? – Business

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. – Misha

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? – Business

I did, but it looks as if it's not being called at all - nothing in the console. – Misha

Try wrapping this up in a <div>? also, could you please post the code for the <call-dialog-link> – Business

Updated post with the CallDialogLink. When wrapped with div - it only returned static properties as string. – Misha

window.location.reload won't this clear the props? – Business

It's only called when specific event is triggered from within another component - so it doesn't have any effect on it as it's not called until that event is triggered. – Misha

okay, so with the div wrapper, what are the values received? – Business

Answer 1

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>

Donation

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

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. – Varicocele