Question

我正在创建评论后系统，每个帖子都会有很多评论。我想在点击“评论”按钮时获取特定帖子的评论。我正在使用laravel 5.4和Vue 2.0。我可以获取现在附在每个帖子上的每个帖子的评论。我想将子评论附加到其父帖子。在这里我的代码：

<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;
                        })
                    }
            }
        }

提前感谢您的帮助!!

Answer 1

由于您正在初始化数据选项中的comments: [ ]，因此整个组件都可以使用它，并且您正在为每个帖子循环显示这些评论，这就是为所有帖子显示评论的原因。

所以这样做

<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});
                        })
                    }
            }
        }

发生的事情是：

将帖子的索引传递给点击处理程序，以getComments作为第二个参数。
然后使用Vue.$set(your_array, index, newValue)通过添加额外的评论属性来更新该特定帖子项目。
es6 spread operator用于将额外的评论属性添加到帖子数组中的现有帖子对象

如果您不想使用，可以像这样使用Object.assign()：

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

以下是 example fiddle

＆GT;

点击评论按钮vue js，将评论附加到特定帖子

1 个答案: