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.

KFSys
Site Moderator
Site Moderator badge
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

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

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

card icon
Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Sign up
card icon
Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Learn more
card icon
Become a contributor

You get paid; we donate to tech nonprofits.

Learn more
Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow – whether you’re running one virtual machine or ten thousand.

Learn more ->
DigitalOcean Cloud Control Panel