我正在使用 Vue-CLI 并收到此错误。它被发现于<comment>
成分。
当评论表单的submitComment()
方法触发并将注释对象添加到selfComments
渲染出来,就会出现错误。可能是因为他们互相引用或其他原因,但我不确定。
我试图仅包含相关信息:
编辑:我认为这与此有关: https://forum.vuejs.org/t/how-to-have-indirectly-self-nested-components-in-vue-js-2/1931 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>
评论.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>
有任何想法吗?