Vue.js에 중첩된 구성 요소: 구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더 함수가 정의되지 않았습니다.

Vue.js에 중첩된 구성 요소: 구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더 함수가 정의되지 않았습니다.

Vue-CLI를 사용하고 있는데 이 오류가 나타납니다.에 있습니다.<comment>요소.

코멘트 폼이submitComment()method는 comment 객체를 기동하여 추가합니다.selfComments에러가 발생합니다.서로 참조하거나 해서 그럴 수도 있지만 잘 모르겠어요.

관련 정보만 포함하려고 했습니다.

편집: 이와 관련된 것 같습니다. https://forum.vuejs.org/t/how-to-have-indirectly-self-nested-components-in-vue-js-2/1931

코멘트 폼표시하다

<template>
   ...
        <ul class="self-comments">
            <li is="comment" v-for="comment in selfComments" :data="comment"></li>
        </ul>
   ...
</template>

<script>    
import Comment from 'components/Comment'

export default {
    name: 'comment-form',
    components: {
        Comment
    },
    props: ['topLevel', 'replyTo', 'parentId'],
    data() {
        return {
            text: '',
            postingStatus: 'Post',
            error: false,
            selfComments: []
        }
    },
    methods: {
        submitComment() {
            ...
        }
    }
}
</script>

<style scoped lang="scss">
...
</style>

댓글.표시하다

<template>
       ...
             <comment-form v-if="replyFormOpen" :top-level="false" :reply-to="data.username" :parent-id="data.id"></comment-form>

             <!-- recursive children... -->
             <ul>
                 <li is="comment" @delete="numComments -= 1" v-for="comment in data.children" :data="comment"></li>
             </ul>

       ...
</template>

** importing CommentForm here seems to cause the issue

<script>
import CommentForm from 'components/CommentForm'

export default {
    name: 'comment',
    components: {
        CommentForm
    },
    props: ['data'],
    data() {
        return {
            deleteStatus: 'Delete',
            deleted: false,
            error: false,
            replyFormOpen: false
        }
    },
    methods: {
        ...
    }
}
</script>

<style scoped lang="scss">
...
</style>

좋은 생각 있어요?

이 문제에 부딪혔다고 생각합니다.컴포넌트간의 순환 참조

고객님의 고객명CommentForm컴포넌트, 등록해 보세요.Comment의 컴포넌트beforeCreate()이벤트. Vue가 컴포넌트를 해결하는 올바른 순서를 알아내는 데 도움이 됩니다.

<script>
export default {
    name: 'comment-form',
    props: ['topLevel', 'replyTo', 'parentId'],
    data() {
        return {
            text: '',
            postingStatus: 'Post',
            error: false,
            selfComments: []
        }
    },
    methods: {
        submitComment() {
            ...
        }
    },
    beforeCreate() {
        // register the Comment component here!!!!
        this.$options.components.Comment = require('components/Comment.vue');
   }
}
</script>

언급URL : https://stackoverflow.com/questions/42634488/nested-components-in-vue-js-failed-to-mount-component-template-or-render-funct