Question

Trying to add a component in VueJS

Posted on December 22, 2019
Apache CentOS
Asked by Georgi Dimitrov

Hello

I’m building an Application using VueJS.

Currently what I’m trying to do is create my own custom component. Unfortunately, I’m unable to pass the title and body back to the VueJS. I’m doing it the same way as creating a new VUejs Instance but nothing works. Can someone assist me?

Here is my code

VueJS

Vue.component('message',{
    
    template: `
    <article class="message">
        <div class="message-header">
            <p>{{ title }}</p>
            <button class="delete" @click="hideModal" aria-label="delete"></button>
        </div>
        <div class="message-body">
            {{ body }}
        </div>
    </article>
    `
};

Now, here is my HTML

<message title='Hello World' body="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></message>

Please let me know how to fix this.

I’m using Apache, Centos 7 if this actually helps.

Submit an answer

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

KFSys

Site Moderator

• December 22, 2019

Accepted Answer

Hi @Remdore,

I can confirm the issue has nothing to do with your droplet rather than with the code. Looking it, it does seem like you are not passing back your ‘title’ and ‘body’ as props.

You should add this to your Vue component

props = ['title','body']

So here is how your full component should look like

Vue.component('message',{
    
    props: ['title','body'],


    template: `
    <article class="message">
        <div class="message-header">
            <p>{{ title}}</p>
            <button class="delete" @click="hideModal" aria-label="delete"></button>
        </div>
        <div class="message-body">
            {{ body }}
        </div>
    </article>
    `, 
};

Additionally, I can see you’ve added an onClick event to your template however there is no method and data passed in the component for it to work. You’ll need to look into this as well.

Regards, KDSys

Georgi Dimitrov • December 26, 2019

Can you assist me one more time?

I’m trying to create the method ‘hideModal’ to be executed on click however I’m unable to.

Currently I have the following:

Vue.component('message',{

    template: `
    <article class="message" :isVisible>
        <div class="message-header">
            <p>{{ title }}</p>
            <button class="delete" @click="hideModal" aria-label="delete"></button>
        </div>
        <div class="message-body">
            {{ body }}
        </div>
    </article>
    `,

    data: {
        isVisible: true,
    },

    methods: {
        hideModal(){
            this.isVisible = false;
        },
    },

};

When I click on the button nothing happens. What am I missing