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

Question

组件模板应该只包含一个根元素.如果您在多个元素上使用v-if,请使用v-else-if来链接它们.

错误
./src/App.vue中无法编译并出现1个错误错误

(发出的值而不是错误的实例)错误编译模板:

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

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

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

官方文件

在官方文档中,关于条件渲染,在使用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>