I’am a newbie to Vue.
I want to put whole page to component besides header and footer
JavaScript
x
5
1
Vue.component('main-block', {template: `
2
<section id="first-block">...</section>
3
<section id="second-block">...</section>
4
<section id="third-block">...</section>`})
5
When I write <main-page></main-page>
inside #app block, it shows only the first section. Why?
Advertisement
Answer
Following the documentation: A-Single-Root-Element
You can’t have more than one root element in your component.
every component must have a single root element
Which means that you have to wrap your template in a root element, ex. a div element
For instance:
JavaScript
1
7
1
Vue.component('main-block', {template: `
2
<div>
3
<section id="first-block">...</section>
4
<section id="second-block">...</section>
5
<section id="third-block">...</section>
6
</div>`})
7