Блог

При работе с компонентом VueJS вы сталкиваетесь со следующей ошибкой в консоли браузера (или в выводе JS linter):

Шаблон компонента должен содержать ровно один корневой элемент. Если вы используете v-if для нескольких элементов, вместо этого используйте v-else-if для их цепочки.

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

 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 

Это не так:

 <template>
  <div class="hola">
    <h1>{{ msg }}</h1>
  </div>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 

Чинить
Оберните свои html-теги в один родительский элемент:

 <template>
  <div>
    <div class="hola">
      <h1>{{ msg }}</h1>
    </div>
    <div class="hello">
      <h1>{{ msg }}</h1>
    </div>
  </div>
</template>
 

Идем дальше
В некоторых случаях вы не можете позволить себе добавить дополнительный родительский элемент, не нарушая структуру HTML. Например, если ваш шаблон дочернего компонента заменит несколько <tr> в родительской таблице HTML:

 <template>
  <tr class="hola">
    ...
  </tr>
  <tr class="hello">
    ...
  </tr>
</template>
 

В данном конкретном случае вам нужно иметь два решения:

используйте функциональные компоненты ; используйте фрагменты (мой любимый) Фрагменты позволяют группировать несколько дочерних элементов под родительским элементом без добавления дополнительных узлов в DOM при рендеринге. Существует пакет vue-фрагментов, который вы можете установить:

 npm install vue-fragments // yarn add vue-fragments
 

Во время загрузки VueJS:

 import { Plugin } from "vue-fragments"; Vue.use(Plugin);
 

Затем в вашем шаблоне компонента:

 <template>
  <v-fragment>
    <tr class="hola">
      ...
    </tr>
    <tr class="hello">
      ...
    </tr>
  <v-fragment>
</template>