插入父帖子vue js的子注释 [英] insert child comments of parent post vue js

问题描述

我正在使用laravel 5.4和vue 2.0.我需要插入父帖子(如Facebook)的评论. 我想将帖子ID"从父级传递到子级模板，以插入该父级帖子的评论.

i am using laravel 5.4 and vue 2.0. I need to insert comments of parent posts like facebook. I want to pass 'post id' from parent to child template to insert comments of that parent post.

<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>&nbsp; {{comment.comment}}</span>
    </div>

    <comment-input :post="post.id" @completed='addRecentComment'></comment-input>
</div>

//评论输入模板

<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>

预先感谢！

推荐答案

由于您要使用:post="post.id"传递道具，因此请在注释输入组件中声明props属性，如下所示:

Since you are passing a prop using :post="post.id" declare a props property in your comment-input component like this:

<script>
    export default {
        props: ['post']
        data() {
            return {
                form: new Form({comment: ''})
            }
        },

        methods: {
            onSubmit() {
                this.form
                    .post('/comments')
                    .then(post => this.$emit('completed', comment));
            }
        }
    }
</script> 

然后您可以使用this.post

我正在对您的代码进行一些重构，以便于理解

I am refactoring your code a little bit so that it is easy to understand

将postId作为名为postId的道具传递，以便易于识别

Pass the postId as a prop named postId so that it is easily recognizble

<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> 

• 您不需要输入exta @keyup事件，因为在表单内按文本输入的默认行为会向您提交表单

  • 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

    您只需将输入的v-model绑定到数据选项中的空注释

    you can just bind the input's v-model to empty comment in your data option

    这篇关于插入父帖子vue js的子注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！