bbs-go-site

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

请勿打扰 2020-05-24 02:41:04

Basically it is because a typo in your ServerReadouts.vue HTML structure. So you just define it like this:

<template>
    </div class="row">
        <server-list></server-list>
        <server-details></server-details>
    </div>
</template>

Which, there is no opening div at all here, so since each component should have a single root, in your case it will consider it as four different elements as roots. Which are two divs, server-list, and server-details. So the final render result will be something like this:

<template>
    <div></div>
    <server-list></server-list>
    <server-details></server-details>
    <div></div>
</template>

这根本不正确。

因此，要解决此问题，您可以执行以下操作：

<template>
    <div class="row">
        <server-list></server-list>
        <server-details></server-details>
    </div>
</template>

导入其他组件，“恰好是一个根元素”。