Требуется ли для компонента компонента Vuejs использовать только один элемент?

Question

Я не видел ничего об этом в документах, возможно, я не искал достаточно, но компонентный шаблон кажется «лучше» с корневым элементом (лучше означает: он работает без корневого элемента с запуском Laravel elixir gulp, но работает gulp --production отображает только первый элемент).

Нужно ли иметь только один корневой элемент внутри <template>?

Другими словами, этот код шаблона разрешен в Vue 2?

<template> 
    <div>A</div> 
    <div>B</div> 
</template> 

Answer 1

Каждый компонент должен иметь ровно один корневой элемент. Экземпляры фрагментов больше не разрешены. Если у вас есть шаблон:

<p>foo</p> 
<p>bar</p> 

Рекомендуется, чтобы просто обернуть все содержимое в новом элементе, как это:

<div> 
    <p>foo</p> 
    <p>bar</p> 
</div> 

VueJS Docs

Answer 2

может скомпилировать, но Vue выбросит вас следующее предупреждение:

[Вью предупреждают]: Компонент шаблон должен содержать ровно один корневой элемент:

И только шоу первый элемент в шаблоне, поэтому вы должны убедиться, что вы оберните свой шаблон в один тег уровня корня следующим образом:

<template> 
    <div> 
    <div>A</div> 
    <div>B</div> 
    </div> 
</template> 

Если посмотреть в консоли инструментов для разработчиков на следующей JSFiddle вы должны увидеть, что я имею в виду:

https://jsfiddle.net/woLwz98n/

Я также воспользоваться шансом, чтобы поблагодарить Вас за laravel-log-viewer, я использую его все время и это отлично!

Answer 3

Да требуется для Vue 2.0 шаблоны имеют один корневой элемент. Просто создайте родительский div и поместите в него весь свой компонентный div.

<template> 
    <div> 
    <div>A</div> 
    <div>B</div> 
    </div> 
</template> 

Vue.js создатель упоминает же в этом посте:
https://github.com/vuejs/vue-loader/issues/384

Answer 4

Далее предоставленному ответы, я думал, что я просто добавить свои два цента, как это может помочь кому-то еще. У меня был дочерний компонент (строк таблицы), и я продолжал класть обертывающие divs вокруг строк таблицы, пытающихся решить вышеизложенные решения, но потом понял, что родительский компонент был частью, которая нужна для обертывания, а не дочерним & проблема была решена. Поэтому, если вы находитесь в ситуации с родительским/дочерним компонентом, сталкивающимся с этой ошибкой, - оберните div вокруг вашего родительского шаблона.