组件模板应该只包含一个根元素答案

【问题标题】：Component template should contain exactly one root element组件模板应该只包含一个根元素
【发布时间】：2017-09-20 04:06:39
【问题描述】：

组件模板应该只包含一个根元素。如果你是对多个元素使用 v-if，改为使用 v-else-if 链接它们。

ERROR 编译失败，出现 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
  }
}

我应该修复哪个部分来消除错误？

【问题讨论】：

</div class="panel panel-default"> 是您的问题。我也认为你错过了另一个结束 div。
@BillCriswell 完全正确。 hahaha.noobie 问题
在这种情况下折叠或折叠编辑器中的所有行并从头到尾打开它们。你可以看到一些有问题的标签

标签： javascript vue.js vuejs2

【解决方案1】：

组件模板应该包含一个根元素。

<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">

官方文档

在官方文档上，关于Conditional Rendering，当使用v-if 和v-else 组合时，可以使用有点“多个”的根元素。

<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>

【讨论】：

【解决方案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>

【讨论】：