Ошибка с пропсами в компонентах, как решить?

Question

[Banan44]

Vue.component('blog-post', {
	props: ['title', 'text'],
	template: `
		<h3>{{title}}</h3>
		<p>{{text}}</p> <!-- Ошибка -->
	`
})

const app = new Vue({
	el: '#app'
})

<div id="app">
	<blog-post title="Hello Vue.js" text="Vue.js this is amazing!"></blog-post>
</div>

Почему выдает ошибку?

Comments

[Alex]

А текст ошибки? Или код в песочнице?

[0xD34F]

а ну бегом документацию читать

[Banan44]

Alex, [Vue warn]: Error compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

1 |
2 | {{title}}
3 | {{text}}
| ^^^^^^^^^^^^^^^
4 |
| ^

found in

--->

[Banan44]

0xD34F, ну конкретно в самом начале написано про пропсы и что их может быть сколько угодно

[0xD34F]

Banan44, ещё раз - бегом читать документацию. Потом, держа в голове прочитанное, смотрите свой код и находите косяк.

[Banan44]

0xD34F, читаю, просто в самом начале про это ни слова не было, а просто показали эти пропсы и пример

Answer 1

[Alex]

Потому что

template should contain exactly one root element

Ваш кэп.

Comments

[Banan44]

т.е больше 1 пропса не получится? зачем тогда там массив

[Alex]

Banan44, Речь не о пропсах. А о корневом элементе

Answer 2

[Тигран Абрамян]

template: `
  <div>
    <h3>{{title}}</h3>
    <p>{{text}}</p>
  </div>
 `