Element: Component template should contain exactly one root element error

Created on 13 Feb 2017  ·  6Comments  ·  Source: ElemeFE/element

```
@ ./src/router/index.js 3:0-37
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/World.vue

Vue template syntax error:

Component template should contain exactly one root element:

{{ msg }}

If you are using v-if on multiple elements, use v-else-if to chain them instead.

@ ./src/components/World.vue 5:2-182
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js


App.vue


main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: { App }
})


router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import World from 'components/World'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'World',
component: World
}
]
})


node --version v5.9.1
"dependencies": {
"vue": "^2.1.10",
"vue-router": "^2.2.0"
},
```

Most helpful comment

add a div before the call of multiple component, they need a parent (the div)

<div>
  <component1></component1>
  <component2></component2>
</div>

All 6 comments

报错信息很清楚了,和 Element 无关。
你的 world.vue 有两个根节点,h3div

<template>
<p>{{ msg }}</p>
<el-time-select
  v-model="value1"
  :picker-options="{
    start: '08:30',
    step: '00:15',
    end: '18:30'
  }"
  placeholder="选择时间">
</el-time-select>
</template>

不好意思,刚接触vue。
请教下模板中不允许出现两个以上html标签,那这个template该怎么写呢?

用一个 div 包起来。

谢谢。

add a div before the call of multiple component, they need a parent (the div)

<div>
  <component1></component1>
  <component2></component2>
</div>

为什么要用一个元素包起来?

Was this page helpful?
0 / 5 - 0 ratings