Apologies for the beginner question. I am facing an issue while trying to display a .vue file with parent and children components, resulting in a "more than one root element" error. It seems strange to me because the imported components are supposed to be enclosed within a <div>. I fail to comprehend how there could be multiple root elements.
Previously, everything was functioning correctly when I imported ServerList.vue and ServerDetails.vue individually 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>
Console error:
./~/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