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.
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!
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
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.