Vue.jsのネストされたコンポーネント：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング関数が定義されていません

Question

Vue-CLIを使用してこのエラーが発生しました。これは<comment>コンポーネントにあります。

CommentFormのsubmitComment()メソッドが呼び出され、selfCommentsにコメントオブジェクトが追加されると、エラーが発生します。お互いや何かを参照しているからかもしれませんが、わかりません。

私が関連する情報だけを含めるようにしようとしました：

編集：私はそれは、これに関連すると思う：https://forum.vuejs.org/t/how-to-have-indirectly-self-nested-components-in-vue-js-2/1931

をCommentForm.vue

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

Comment.vue

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

Aいいえ、アイデア？

Answer 1

あなたはこの問題に遭遇していると思います。Circular References between Components

CommentFormコンポーネントでは、beforeCreate()イベント中にCommentコンポーネントを登録してみてください。これは、Vueがコンポーネントを解決する正しい順序を把握するのに役立ちます。それは `beforeCreateだよう

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