Sorry for the neophyte question. I'm trying to render a .vue file with children and a parent, and I'm getting a "more than one root element" error. What strikes me as odd, is that the components that are being imported are supposed to be wrapped in a <div>
-- I don't understand, therefore, how there could be more than one root element.
This was working when I was importing ServerList.vue
and ServerDetails.vue
separately into my App.vue
(main) file.
Code (ServerReadouts.vue
):
<template>
</div class="row">
<server-list></server-list>
<server-details></server-details>
</div>
</template>
<script>
import ServerList from './ServerList.vue'
import ServerDetails from './ServerDetails.vue'
export default {
components: {
'server-list': ServerList,
'server-details': ServerDetails
}
}
</script>
<style>
</style>
Code (App.vue
):
<template>
<div class="container">
<app-header></app-header>
<app-server-readouts></app-server-readouts>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
import ServerReadouts from './ServerReadouts.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'app-server-readouts': ServerReadouts,
}
}
</script>
<style>
</style>
控制台错误:
./~/vue-loader/lib/template-compiler.js?id=data-v-7ea00901!./~/vue-loader/lib/selector.js?type=template&index=0!./src/ServerReadouts.vue
template syntax error 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/ServerReadouts.vue 11:23-154
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi main