Почему Vue рендерит только первый элемент?

Question

[Денис Гончаренко]

Не понимаю что происходит, но Vue почему-то рендерит только первый элемент. Допустим вот код:

<div id="app">
    <app/>
    <designer ref="designer"/>
    <higlighter ref="higlighter"/>
    <context-menu ref="context_menu"/>
</div>

Вот javascript:

const app = new Vue({
    el: '#app',
    components: { App, Designer, Higlighter, ContextMenu}
});

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

При этом если взять и запихнуть три оставшихся компонента в первый, например в App то там они уже нормально рендерятся. Что, есть какое-то условие, что в корне должен быть один компонент только или что? Не видел ничего такого в документации, бред какой-то.

Answer 1

[0xD34F]

Потому что в html далеко не всякий тэг может быть самозакрывающимся, и если не может, а вы его так оформили, то он рассматривается браузером как открывающий, и всё, что следует за ним, попадает внутрь элемента. То есть, у вас элемент app имеет дочерний элемент designer, у него тоже есть дочерний элемент - higlighter, у которого внутри context-menu. В таком виде ваш шаблон попадает к Vue.

Так что закрывайте тэги, или вместо dom-шаблона используйте что-нибудь другое - свойство template, render-функция, однофайловые компоненты.