Vue.js 錯誤訊息 Component template should contain exactly one root element

在編輯完vue 組件之後, 出現以下的錯誤訊息


(Emitted value instead of an instance of Error)
  Error compiling template:

  <MyHeader></MyHeader>
  <p>Hello</p>

  - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.


 @ ./src/components/Intents/Intents.vue 11:0-370
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js


原因是出在我的template, 直接用了 <MyHeader> 和 <p> 這兩個元素

</template>

<MyHeader></MyHeader>

<p>Intents</p>

</template>

但實際上, 如果有兩個以上的元素, 我們必需用 <div> 把他們包起來

</template>

<div>

<MyHeader></MyHeader>

<p>Intents</p>

</div>

</template>

而當我們沒有照這個規則編寫template的話, 就會報錯