오류: 렌더 함수에서 반환된 여러 루트 노드.v-dv-group 출신

오류: 렌더 함수에서 반환된 여러 루트 노드.v-dv-group 출신

나는 Vuex와 Vuetify를 사용한다.

I am trying to create a.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>

브룩스

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: {

    }
}

내가 그 일을 추가한 후에v-item-group오류가 발생함:

[부유 경고]:렌더 함수에서 반환된 여러 루트 노드.렌더 함수는 단일 루트 노드를 반환해야 한다.

이미지도 나타나지 않는다.

내 코드가 어떻게 여러 루트 노드를 정확하게 생성하지?

당신은 오직 하나의 아이만을 가질 수 있다.<v-item>현재 2개 입니다.<v-img>그리고 a<h3>.

v-item렌더리스 컴포넌트.요소 자체를 렌더링하는 것이 아니라 기본 슬롯의 내용만 렌더링한다.슬롯에 여러 개의 항목이 포함되어 있으면 모두 반환되어 나타나는 오류가 발생함

Vuetify의 관련 코드는 다음과 같다.

https://github.com/vuetifyjs/vuetify/blob/7f7391d76dc44f7f7d64f30ad7e0e429c85597c8/packages/vuetify/src/components/VItemGroup/VItem.ts#L53

구성 요소 자체에서 오류 메시지가 표시되어야 함:

v-client는 단일 요소만 포함해야 함

두 노드를 단일 부모 노드로 감싸 보십시오.

참조URL: https://stackoverflow.com/questions/57810097/error-multiple-root-nodes-returned-from-render-function-from-v-item-group