Question

Trying to add a component in VueJS

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!

Sign In or Sign Up to Answer

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.

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

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in Q&A, subscribe to topics of interest, and get courses and tools that will help you grow as a developer and scale your project or business.

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