[英]insert child comments of parent post vue js
i am using laravel 5.4 and vue 2.0. 我正在使用laravel 5.4和vue 2.0。 I need to insert comments of parent posts like facebook. 我需要插入父帖子(如Facebook)的评论。 I want to pass 'post id' from parent to child template to insert comments of that parent post. 我想将“帖子ID”从父级传递到子级模板,以插入该父级帖子的评论。
<div class="post-section" v-for="(post,index) in posts">
<div class="media-content" v-text='post.body'></div>
<button @click="getComments(post, index)" class="btn btn-link">Comments</button>
<div v-if='show' class="card comment" v-for='comment in post.comments'>
<span> {{comment.comment}}</span>
</div>
<comment-input :post="post.id" @completed='addRecentComment'></comment-input>
</div>
//comment-input template //评论输入模板
<template>
<form @submit.prevent='onSubmit'>
<div class="media-comment">
<input @keyup.enter="submit" type="text" v-model='form.comment' class="form-control" placeholder="comment...">
</div>
</form>
</template>
<script>
export default {
data() {
return {
form: new Form({comment: ''})
}
},
methods: {
onSubmit() {
this.form
.post('/comments')
.then(post => this.$emit('completed', comment));
}
}
}
</script>
thanks in advance !! 提前致谢 !!
Since you are passing a prop using :post="post.id"
declare a props property in your comment-input component like this: 由于您正在使用:post="post.id"
传递道具,因此请在注释输入组件中声明道具属性,如下所示:
<script>
export default {
props: ['post']
data() {
return {
form: new Form({comment: ''})
}
},
methods: {
onSubmit() {
this.form
.post('/comments')
.then(post => this.$emit('completed', comment));
}
}
}
</script>
Then you can use the prop in the component using this.post
然后,您可以使用this.post
在组件中使用this.post
I am refactoring your code a little bit so that it is easy to understand 我对您的代码进行了一些重构,以便于理解
Pass the postId as a prop named postId
so that it is easily recognizble 将postId传递为名为postId
的道具,以便轻松识别
<comment-input :postId="post.id" @completed='addRecentComment'></comment-input>
Then in your comment-input component declare the props propert like this 然后在您的注释输入组件中声明道具属性,如下所示
props: ['postId']
and finally your comment-input component 最后是您的评论输入组件
<template>
<form @submit.prevent='onSubmit'>
<div class="media-comment">
<input type="text" v-model='comment' class="form-control" placeholder="comment...">
</div>
</form>
</template>
<script>
export default {
props: ['postId'],
data() {
return {
comment: ''
}
},
methods: {
onSubmit() {
axios.post('api_url/' + this.postId, {comment: this.comment})
.then(response => {
this.$emit('completed', this.comment);
this.comment = ''; // reset back to empty
});
}
}
}
</script>
you don't need exta @keyup
event on input since the default behaviour of pressing enter in text input inside a form will submit you form 您不需要输入exta @keyup
事件,因为在表单内的文本输入中按Enter的默认行为将提交您的表单
you can just bind the input's v-model
to empty comment in your data option 您可以将输入的v-model
绑定到数据选项中的空注释
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.