Vue component doesn't display another instance

Question

I started learning Vue for real now and 'm following videos from Jeffrey Way Vue 2....and in this video https://laracasts.com/series/learn-vue-2-step-by-step/episodes/9 he has 2 messages in html and on my side it doesn't work.... this is my code...just copy paste it in .html document and it works...so if someone can explain it to me why does my second message doesn't display??

<!-- begin snippet -->

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <!-- <link rel="stylesheet" type="text/css" href="/var/www/html/vanilla/Vue/bulma.min.css"> -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
</head>
<body>

<div id="root" class="container">

    <message title="Hello World" body="Lorem ipsum dolor sit amet"><message>
    <message title="Hello Latin" body="Repetitio est mater studiorum"><message>

</div>

<!-- <script src="/var/www/html/vanilla/Vue/vue.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script>
    Vue.component('message', {

    props: ['title', 'body'],

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

    template: `
        <article class="message" v-show="isVisible">
          <div class="message-header">
              {{ title }}
              <button class="button" @click="hideModal">X</button>
          </div>
          <div class="message-body">
            {{ body }}
          </div>
        </article>
        `,

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

new Vue({
    el: '#root'
});

</script>
</body>
</html>

<!-- end snippet -->

this one doesn't get shown

<message title="Hello Latin" body="Repetitio est mater studiorum"><message>

Bsalex · Accepted Answer · 2017-10-18 15:06:56Z

1

<message title="Hello World" body="Lorem ipsum dolor sit amet"><message>

Should be

<message title="Hello W`enter code here`orld" body="Lorem ipsum dolor sit amet"></message>

You are missing closing tags </message>

answered Oct 18, 2017 at 15:06

Bsalex

2,9701 gold badge18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lewis4u Over a year ago

Did you try the code? The message tags are properly closed!

Bsalex Over a year ago

Yes. Did you? Here is the working example plnkr.co/edit/XypvmN6MGMKWhM6KJhq4?p=preview

Samuel James · Accepted Answer · 2017-10-18 15:17:43Z

0

Try this

<html>
    <head>
        <title>Index</title>
        <!-- <link rel="stylesheet" type="text/css" href="/var/www/html/vanilla/Vue/bulma.min.css"> -->
        <link rel="stylesheet" type="text/css" >
    </head>
    <body>
    
    <div id="root" class="container">
        <message :title="title" :body="body"></message>
    
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
    <script>
        Vue.component('message', {
    
        props: ['title', 'body'],
    
        data() {
            return {
                isVisible: true
            }
        },
    
        template:'#bodyt',
            
    
        methods: {
            hideModal() {
                this.isVisible = false;
            }
        }
    });
    
    new Vue({
        el: '#root',
        data: {
        title: 'Hello Latin',
        body:'Repetitio est mater studiorum',
        },
    });
    </script>
    
    <template id="bodyt">
    
    <article class="message" v-show="isVisible">
              <div class="message-header">
                  {{ title }}
                  <button class="button" @click="hideModal">X</button>
              </div>
              <div class="message-body">
                {{ body }}
              </div>
            </article>
    </template>
            
    </body>
    </html>

edited Oct 18, 2017 at 15:17

answered Oct 18, 2017 at 15:03

Samuel James

1,53616 silver badges17 bronze badges

1 Comment

lewis4u Over a year ago

Bsalex has the right answer...i forgot to close the message tags...i did wrote the ending tags but forgot the / slash

Collectives™ on Stack Overflow

Vue component doesn't display another instance

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related