单击评论按钮时将评论附加到特定帖子 vue js [英] Attach comments to specific post when click comments button vue js

问题描述

我正在创建帖子评论系统，每个帖子都会有很多评论.我想在点击评论"按钮时获取特定帖子的评论，例如 facebook.我正在使用 laravel 5.4 和 Vue 2.0.我可以获取现在附加到每个帖子的每个帖子的评论.我想将子评论附加到其父帖子.这是我的代码:

<post>{{post.body}}</post><button @click="getComments(post)" class="btn btn-link">评论</button><div class="comment" v-for='comment in comments'><p><span>&nbsp;{{comment.comment}}</span></p>
<脚本>导出默认{数据() {返回 {帖子:[]，注释: []，}},创建(){Post.all(posts => this.posts = posts)},方法: {获取评论(发布){axios.post('getcomments', {id: post.id}).then(response => {控制台日志(响应数据)；this.comments = response.data;})}}}

预先感谢您的帮助！！

解决方案

由于您在 data 选项中初始化 comments: [ ] 它可用于整个组件，并且您正在循环浏览此评论对于每个帖子，这就是为什么您会看到所有帖子的评论.

就这样吧

<post>{{post.body}}</post><button @click="getComments(post, index)" class="btn btn-link">评论</button><div class="comment" v-for='comment in post.comments'><p><span>&nbsp;{{comment.comment}}</span></p>
<脚本>导出默认{数据() {返回 {帖子:[]，}},创建(){Post.all(posts => this.posts = posts)},方法: {getComments(帖子，索引){axios.post('getcomments', {id: post.id}).then(response => {控制台日志(响应数据)；this.$set(this.posts, index, {...post, comments: response.data});})}}}

正在发生的事情是:

• 将帖子的索引传递给点击处理程序以获取作为第二个参数的评论.

• 然后使用 Vue.$set(your_array, index, newValue) 通过添加额外的评论属性来更新该特定帖子项.

• es6 传播运算符是用于将额外的评论属性添加到帖子数组中的现有帖子对象

• 如果你不想使用你可以使用 Object.assign()像这样:

  this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }));

这里是 示例小提琴

>

I am creating post-comment system where each post will have many comments. I want to fetch the comments of a specific post when click on 'comments' button alike facebook. I am using laravel 5.4 and Vue 2.0. I can fetch the comments of each post which now attaching to every post. I want to attach the child comments to its parent post. here my code:

<div class="post-section" v-for="post in posts">
        <post>{{post.body}}</post>
        <button @click="getComments(post)" class="btn btn-link">Comments</button>
    <div class="comment" v-for='comment in comments'>
        <p>
            <span>&nbsp; {{comment.comment}}</span>
        </p>
</div>

<script>
        export default {

            data() {
                    return {
                        posts: [],
                        comments: [],
                    }
            },

            created() {
                    Post.all(posts => this.posts = posts)
            },

            methods: {

                    getComments(post) {
                        axios.post('getcomments', {id: post.id}).then(response => {
                            console.log(response.data);
                            this.comments = response.data;
                        })
                    }
            }
        }

Thanks in advance for help !!

解决方案

Since you are initializing comments: [ ] in the data option it is available to the whole component and you are looping through this comments for every post that is why you get comments displayed for all the posts.

So do it like this

<div class="post-section" v-for="(post, index) in posts">
        <post>{{post.body}}</post>
        <button @click="getComments(post, index)" class="btn btn-link">Comments</button>
    <div class="comment" v-for='comment in post.comments'>
        <p>
            <span>&nbsp; {{comment.comment}}</span>
        </p>
</div>

<script>
        export default {

            data() {
                    return {
                        posts: [],
                    }
            },

            created() {
                    Post.all(posts => this.posts = posts)
            },

            methods: {

                    getComments(post, index) {
                        axios.post('getcomments', {id: post.id}).then(response => {
                            console.log(response.data);
                            this.$set(this.posts, index, {...post, comments: response.data});
                        })
                    }
            }
        }

What is happening is:

• pass the index of the post to the click handler to getComments as 2nd argument.

• then use Vue.$set(your_array, index, newValue) to update that particular post item by adding extra comments property.

• es6 spread operator is used to add the extra comments property to the existing post object in the array of posts

• if you don't want to use you can use Object.assign()like this:

  this.$set(this.posts, index, Object.assign({}, post, { comments: response.data }));
  

Here is the example fiddle

>

这篇关于单击评论按钮时将评论附加到特定帖子 vue js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！