- Component template should contain exactly one root element-蒲公英云

- Component template should contain exactly one root element

悠悠 2022-05-08 06:26 242阅读 0赞

1、错误描述

ERROR  Failed to compile with 1 errors                                                                                                                                                                                        17:59:34
 error  in ./src/components/Muse.vue
(Emitted value instead of an instance of Error)
  Error compiling template:
  <mu-button class="demo-color-btn" color="primary">AAAA</mu-button>
  <mu-button class="demo-color-btn" color="success">BBBB</mu-button>
  <mu-button class="demo-color-btn" color="indigo400">CCCC</mu-button>
  <mu-button class="demo-color-btn" color="#156956">DDDD</mu-button>
  - 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/Muse.vue 11:0-360
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

2、错误原因

  在使用muse-ui组件时，插入几个按钮，但是没有根节点元素
<mu-button class="demo-color-btn" color="primary">AAAA</mu-button>
 <mu-button class="demo-color-btn" color="success">BBBB</mu-button>
 <mu-button class="demo-color-btn" color="indigo400">CCCC</mu-button>
 <mu-button class="demo-color-btn" color="#156956">DDDD</mu-button>

3、解决办法

  需要在这几个按钮的外层添加一个元素作为根节点
<div>
    <mu-button class="demo-color-btn" color="primary">AAAA</mu-button>
    <mu-button class="demo-color-btn" color="success">BBBB</mu-button>
    <mu-button class="demo-color-btn" color="indigo400">CCCC</mu-button>
    <mu-button class="demo-color-btn" color="#156956">DDDD</mu-button>
  </div>