Шаблон компонента должен содержать ровно один корневой элемент

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

Ошибка не удалось скомпилировать с 1 ошибки
ошибка В./ src / App.vue

(выданное значение вместо экземпляра ошибки) Ошибка компиляции шаблона: 

 <div id="app" class="container">
     <div class="page-header">
        <h1>Vue.js 2 & Firebase Sample Application</h1>
     </div>
  </div class="panel panel-default">
     <div class="panel-heading">
         <h3>Book Lists</h3>
     </div>
     <div clas ="panel-body">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>
                Title
              </th>
              <th>
                Author
              </th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>
     </div>
  </div>

Вот мой экспорт по умолчанию 

export default {
  name: 'app',
  firebase: {
    books: booksRef
  },
  components: {
    Hello
  }
}

Какую часть я должен исправить, чтобы устранить ошибку?

2 3
javascript vue.js vuejs2

2 ответа:

Вот фиксированный код: 

<div id="app" class="container">
    <div class="page-header">
        <h1>Vue.js 2 & Firebase Sample Application</h1>
    </div>
    <div class="panel panel-default">

        <div class="panel-heading">
             <h3>Book Lists</h3>
        </div>

        <div clas ="panel-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th> Title </th>
                        <th> Author</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
         </div>

    </div>
</div>
3
Шаблон компонента

Должен содержать ровно один корневой элемент.

<template>
    <root-element-1></root-element-1>
    <root-element-2></root-element-2>
</template>

Это будет исправление 

<template>
    <div>
        <root-element-1></root-element-1>
        <root-element-2></root-element-2>
    </div>
</template>

В вашем случае 

</div class="panel panel-default">

Должно быть 

<div class="panel panel-default">

Официальная Документация

По официальной документации, о условном рендеринге , несколько" множественный " корневой элемент может быть использован при использовании v-if и v-else combo.

<template v-if="true">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
</template>
4