Laravel Vue 2导入的组件属性或方法未定义
我正在尝试嵌套一些组件——最终我希望有一个显示帖子的组件，其中一个PostItem组件用于渲染每篇帖子。在positem中，我想要一个相关评论的列表，其中CommentItem用于呈现每个评论。我使用PostItem显示帖子，没有错误，但一旦添加评论，就会出现错误。因此，为了简化，我将CommentsList组件拉了出来，我只是尝试在页面上显示它，手动加载所有注释-它是PostsList的精确副本，除了用comment替换post之外，但它会生成一个错误：Laravel Vue 2导入的组件属性或方法未定义,laravel,vue.js,vuejs2,vue-component,laravel-5.6,Laravel,Vue.js,Vuejs2,Vue Component,Laravel 5.6,我正在尝试嵌套一些组件——最终我希望有一个显示帖子的组件，其中一个PostItem组件用于渲染每篇帖子。在positem中，我想要一个相关评论的列表，其中CommentItem用于呈现每个评论。我使用PostItem显示帖子，没有错误，但一旦添加评论，就会出现错误。因此，为了简化，我将CommentsList组件拉了出来，我只是尝试在页面上显示它，手动加载所有注释-它是PostsList的精确副本，除了用comment替换post之外，但它会生成一个错误： [Vue warn]: Propert
[Vue warn]: Property or method "commment" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Comment> at resources/assets/js/components/CommentItem.vue
<CommentsList> at resources/assets/js/components/CommentsList.vue
<Root>
[Vue warn]：属性或方法“commment”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。见：https://vuejs.org/v2/guide/reactivity.html#Declaring-反应性质。
发现于
--->位于resources/assets/js/components/CommentItem.vue
位于resources/assets/js/components/CommentsList.vue
<template>
<div class="media-list media-list-divided bg-lighter">
<comment v-for="comment in comments"
:key="comment.id"
:comment="comment">
</comment>
</div>
</template>
<script>
import comment from './CommentItem'
export default {
components: { comment },
data: function() {
return {
comment: {
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
},
comments: [
{
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
}
]
};
},
created() {
this.fetchCommentsList();
},
methods: {
fetchCommentsList() {
axios.get('/api/comments').then((res) => {
//alert(JSON.stringify(res.data[0], null, 4));
this.comments = res.data;
});
},
createComment() {
axios.post('api/comments', {content: this.comment.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
.then((res) => {
this.comment.content = '';
// this.comment.user_id = Laravel.userId;
// this.task.statuscolor = '#ff0000';
this.edit = false;
this.fetchCommentsList();
})
.catch((err) => console.error(err));
},
deleteComment(id) {
axios.delete('api/comments' + id)
.then((res) => {
this.fetchCommentsList()
})
.catch((err) => console.error(err));
},
}
}
</script>
<template>
<div>
<div v-if='posts.length === 0' class="header">There are no posts yet!</div>
<post v-for="post in posts"
:key="post.id"
:post="post">
</post>
<form action="#" @submit.prevent="createPost()" class="publisher bt-1 border-fade bg-white">
<div class="input-group">
<input v-model="post.content" type="text" name="content" class="form-control publisher-input" autofocus>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">New Post</button>
</span>
</div>
<span class="publisher-btn file-group">
<i class="fa fa-camera file-browser"></i>
<input type="file">
</span>
</form>
</div>
</template>
<script>
// import CommentsManager from './CommentsManager.vue';
import post from './PostItem.vue';
export default {
components: {
post
},
data: function() {
return {
post: {
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
},
posts: [
{
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
}
]
};
},
created() {
this.fetchPostsList();
},
methods: {
fetchPostsList() {
axios.get('/api/posts').then((res) => {
//alert(JSON.stringify(res.data[0], null, 4));
this.posts = res.data;
});
},
createPost() {
axios.post('api/posts', {content: this.post.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
.then((res) => {
this.post.content = '';
// this.post.user_id = Laravel.userId;
// this.task.statuscolor = '#ff0000';
this.edit = false;
this.fetchPostsList();
})
.catch((err) => console.error(err));
},
deletePost(id) {
axios.delete('api/posts' + id)
.then((res) => {
this.fetchPostsList()
})
.catch((err) => console.error(err));
},
}
}
</script>
从“/CommentItem”导入注释
导出默认值{
组件：{comment}，
数据：函数（）{
返回{
评论：{
id:1，
内容：“，
编辑：错，
创建时间：new Date（）.toLocaleString（），
用户：{
id:1，
名称：“”，
}
},
评论：[
{
id:1，
内容：“，
编辑：错，
创建时间：new Date（）.toLocaleString（），
用户：{
id:1，
名称：“”，
}
}
]
};
},
创建（）{
this.fetchCommentsList（）；
},
方法：{
fetchCommentsList（）{
获取（'/api/comments'）。然后（（res）=>{
//警报（JSON.stringify（res.data[0]，null，4））；
this.comments=res.data；
});
},
createComment（）{
post（'api/comments'，{content:this.comment.content，user\u id:Laravel.userId，vessel\u id:Laravel.vesselId}）
。然后（（res）=>{
this.comment.content=''；
//this.comment.user_id=Laravel.userId；
//this.task.statuscolor='#ff0000'；
this.edit=false；
this.fetchCommentsList（）；
})
.catch（（err）=>console.error（err））；
},
删除注释（id）{
axios.delete（'api/注释'+id）
。然后（（res）=>{
this.fetchCommentsList（）
})
.catch（（err）=>console.error（err））；
},
}
}
<template>
<div>
<a class="avatar" href="#">
<img class="avatar avatar-lg" v-bind:src="'/images/user' + comment.user.id + '-160x160.jpg'" alt="...">
</a>
<div class="media-body">
<p>
<a href="#"><strong>{{ commment.user.name }}</strong></a>
</p>
<p>{{ comment.content }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'comment',
props: {
comment: {
required: true,
type: Object,
default: {
content: "",
id: 1,
user: {
name: "",
id: 1
}
}
}
},
data: function() {
return {
}
}
}
</script>
{{comment.content}
导出默认值{
名称：'注释'，
道具：{
评论：{
要求：正确，
类型：对象，
默认值：{
内容：“，
id:1，
用户：{
姓名：“，
身份证号码：1
}
}
}
},
数据：函数（）{
返回{
}
}
}
<template>
<div class="media-list media-list-divided bg-lighter">
<comment v-for="comment in comments"
:key="comment.id"
:comment="comment">
</comment>
</div>
</template>
<script>
import comment from './CommentItem'
export default {
components: { comment },
data: function() {
return {
comment: {
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
},
comments: [
{
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
}
]
};
},
created() {
this.fetchCommentsList();
},
methods: {
fetchCommentsList() {
axios.get('/api/comments').then((res) => {
//alert(JSON.stringify(res.data[0], null, 4));
this.comments = res.data;
});
},
createComment() {
axios.post('api/comments', {content: this.comment.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
.then((res) => {
this.comment.content = '';
// this.comment.user_id = Laravel.userId;
// this.task.statuscolor = '#ff0000';
this.edit = false;
this.fetchCommentsList();
})
.catch((err) => console.error(err));
},
deleteComment(id) {
axios.delete('api/comments' + id)
.then((res) => {
this.fetchCommentsList()
})
.catch((err) => console.error(err));
},
}
}
</script>
<template>
<div>
<div v-if='posts.length === 0' class="header">There are no posts yet!</div>
<post v-for="post in posts"
:key="post.id"
:post="post">
</post>
<form action="#" @submit.prevent="createPost()" class="publisher bt-1 border-fade bg-white">
<div class="input-group">
<input v-model="post.content" type="text" name="content" class="form-control publisher-input" autofocus>
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">New Post</button>
</span>
</div>
<span class="publisher-btn file-group">
<i class="fa fa-camera file-browser"></i>
<input type="file">
</span>
</form>
</div>
</template>
<script>
// import CommentsManager from './CommentsManager.vue';
import post from './PostItem.vue';
export default {
components: {
post
},
data: function() {
return {
post: {
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
},
posts: [
{
id: 1,
content: "",
edited: false,
created_at: new Date().toLocaleString(),
user: {
id: 1,
name: '',
}
}
]
};
},
created() {
this.fetchPostsList();
},
methods: {
fetchPostsList() {
axios.get('/api/posts').then((res) => {
//alert(JSON.stringify(res.data[0], null, 4));
this.posts = res.data;
});
},
createPost() {
axios.post('api/posts', {content: this.post.content, user_id: Laravel.userId, vessel_id: Laravel.vesselId })
.then((res) => {
this.post.content = '';
// this.post.user_id = Laravel.userId;
// this.task.statuscolor = '#ff0000';
this.edit = false;
this.fetchPostsList();
})
.catch((err) => console.error(err));
},
deletePost(id) {
axios.delete('api/posts' + id)
.then((res) => {
this.fetchPostsList()
})
.catch((err) => console.error(err));
},
}
}
</script>
还没有帖子！
新职位
//从“/CommentsManager.vue”导入CommentsManager；
从“/positem.vue”导入post；
导出默认值{
组成部分：{
邮递
},
数据：函数（）{
返回{
职位：{
id:1，
内容：“，
编辑：错，
创建时间：new Date（）.toLocaleString（），
用户：{
id:1，
名称：“”，
}
},
职位：[
{
id:1，
内容：“，
编辑：错，
创建时间：new Date（）.toLocaleString（），
用户：{
id:1，
名称：“”，
}
}
]
};
},
创建（）{
this.fetchPostsList（）；
},
方法：{
fetchPostsList（）{
获取（'/api/posts'）。然后（（res）=>{
//警报（JSON.stringify（res.data[0]，null，4））；
this.posts=res.data；
});
},
createPost（）{
post（'api/posts'，{content:this.p