Javascript 错误：从渲染函数返回多个根节点。来自v项群

我将Vuex与Vuetify一起使用

我正在尝试创建一个

v-dialog

组件。表单看起来不错，但缺少

v-item-group

中的图像

Vue组件

<template>
    <v-row justify="center">
        <v-dialog v-model="isDoorDimDialog" max-width="800px">
            <template v-slot:activator="{ on }">
                <v-btn color="primary" dark v-on="on">Add</v-btn>
            </template>
            <v-card>
                <v-card-title>
                <span class="headline">Select Door Dimensions:</span>
                </v-card-title>
                <v-card-text>
                    <v-container>
                        <v-row>

                            <v-col cols="12" sm="6" md="4">
                                <v-text-field 
                                    label="Height*" 
                                    required>
                                </v-text-field>
                            </v-col>

                            <v-col cols="12" sm="6" md="4">
                                <v-text-field 
                                    label="Width" 
                                    hint="example of helper text only on focus">
                                </v-text-field>
                            </v-col>

                            <v-col>
                            <v-item-group v-model="selectedType" mandatory>
                                <v-row>
                                    <v-col
                                        v-for="(img, name) in imgTypes"
                                        :key="name"
                                        cols="12"
                                        md="6"
                                    >
                                        <v-item v-slot:default="{ active, toggle }">
                                            <v-img
                                                :src="`{{img}}`"
                                                height="150"
                                                class="text-right pa-2"
                                                @click="toggle"
                                            >
                                                <v-scroll-y-transition>
                                                    <div
                                                        v-if="active"
                                                        class="display-3 flex-grow-1 text-center"
                                                    >
                                                    Active
                                                    </div>
                                                </v-scroll-y-transition>
                                            </v-img>
                                            <h3>{{name}} Door</h3>
                                        </v-item>
                                    </v-col>
                                </v-row>
                            </v-item-group>
                            </v-col>
                        </v-row>
                    </v-container>
                    <small>*indicates required field</small>
                </v-card-text>
                <v-card-actions>
                    <div class="flex-grow-1"></div>
                        <v-btn 
                            color="blue darken-1" 
                            text 
                            @click="isDoorDimDialog = false">Close
                        </v-btn>
                        <v-btn 
                            color="blue darken-1" 
                            text 
                            @click="isDoorDimDialog = false">Save
                        </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-row>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState('addDoors', {
            imgTypes: state => state.imgTypes
        }),
        isDoorDimDialog: {
            set(isDoorDimDialog) {
                this.$store.commit('addDoors/setIsDoorDimDialog', isDoorDimDialog);
            },
            get() {
                return this.$store.state.addDoors.isDoorDimDialog;
            }
        },
        selectedType: {
            set(selectedType) {
                this.$store.commit('addDoors/setSelectedType', selectedType);
            },
            get() {
                return this.$store.state.addDoors.selectedType;
            }
        }
    },

}
</script>

<style scoped>

</style>

添加

v-item-group

后，我得到错误：

[Vue warn]：从渲染函数返回多个根节点。渲染函数应返回单个根节点

图像也没有显示出来

---

我的代码如何准确地创建多个根节点？

在

中只能有一个子节点。目前您有两个，一个

和一个

v-item

是一个无渲染组件。它本身不渲染任何元素，只渲染其默认插槽的内容。如果该插槽包含多个项目，那么它们都将被返回，从而导致您看到的错误

Vuetify中的相关代码如下：

您应该看到来自组件本身的错误消息：

v项应仅包含一个元素

---

尝试将两个节点包装在一个父节点中。

我在控制台中遇到了两个不同的错误。我在上面添加的一个是红色的，另一个是黄色的。我只注意了红色的那一个

export const addDoors = {
    namespaced: true,
    state: {
        isDoorDimDialog: false,
        imgTypes: {
            Standard: '@/assets/door-icons/icon-doors-standard.png',
            Sliding: '@/assets/door-icons/icon-doors-sliding.png',
            Balcony: '@/assets/door-icons/icon-doors-balcony.png'
        },
        selectedType: ''
    },
    mutations: {
        setIsDoorDimDialog(state, isDoorDimDialog) {
            state.isDoorDimDialog = isDoorDimDialog;
        },
        setSelectedType(state, selectedType) {
            state.selectedType = selectedType;
        }
    },
    actions: {

    }
}