Question

Trying to add a component in VueJS

Posted December 22, 2019 663 views
CentOSApache

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.

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.

×
2 answers

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

  • Thank you very much, this helped instantly!!!

    I do have a question, you mentioned the button won’t work and it doesn’t can you let me know what’s going on?

    I’m kind of in the learning process of VueJS and keep making mistakes.

    • Hi @Remdore,

      Happy to be of help!

      Sure, will help you out however I suggest you watch a course on it rather than just reading about it somewhere on the internet, at least if that’s what you are doing that is!
      Anyway, happy to assist with all.

      So, it does seem like you’ve added a method to be executed onclick the button however I can’t see the actual method in the component. Additionally you are not passing any data as well. Let me give you an example which you can add to your component

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

      The above code creates a method which calls the isVisible variable. If it’s true, display the article, if isn’t don’t. The button will just make the isVisible variable false, making the article non visible.

      You’ll need to add v-show="isVisible" to your article template as well in order for it to work.

      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

  • Hi @Remdore,

    It does seem like you’ve been trying to bind :isVisible to the article tag you’ve created. Unfortunately, this is not possible as far as I’m aware.

    As I mentioned in my last reply, you’ll need to use v-show. It will look something like

    <article class="message" v-show='isVisible'>
    

    You can change v-show with v-if as well. It will basically display the same thing.

    <article class="message" v-if='isVisible'>
    

    Regards,
    KDSys

    • Just noticed one other thing, when using ‘data’ in a component you need to pass it like this

      data(){
          return{
              isVisible: true,
          };
      }
      

      Otherwise it won’t work properly.

      Regards,
      KDSys

Submit an Answer