CODEWITHSUNDEEP
vue.jsvue-component
Frankie
Frankie

Reputation: 25165

Vue Single File Components, how to mount multiple?

Having an index.js file like this:

new Vue({
    el: '#app',
    components: {
        'hello': Hello,
        'counter': Counter,
        'goodbye': GoodBye
    }
});

And an index.html file like this:

<div id="app">
    <Counter />
    <Goodbye />
    <Hello />
</div>

Only the first item inside #app is rendered.

As is, Counter shows ok. If I jump Goodbye or Hello up, they will also render perfectly.

I obviously would like all of them to render. What am I doing wrong?

Upvotes: 1

Views: 2743

Answers (1)

Ferrybig
Ferrybig

Reputation: 18834

HTML Does not support closing tags with />, its bahaves as the tag is not closed.

This means your structure looks like the following to the browser (check you elements with javascript disabled):

<div id="app">
    <Counter>
        <Goodbye>
            <Hello>
            </Hello>
        </Goodbye>
    </Counter>
</div>

This will of course not work, we need to update index.html to:

<div id="app">
    <Counter></Counter>
    <Goodbye></Goodbye>
    <Hello></Hello>
</div>

Upvotes: 4

Related Questions