插入父帖子vue js的子评论

Posted 2023-02-23

【中文标题】插入父帖子vue js的子评论

【英文标题】：insert child comments of parent post vue js

【发布时间】：2017-12-19 07:37:18

【问题描述】：

我正在使用 laravel 5.4 和 vue 2.0。我需要插入像 facebook 这样的父帖子的 cmets。 我想将“帖子 ID”从父模板传递给子模板，以插入该父帖子的 cmets。

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

提前致谢！！

【问题讨论】：

那么你的问题到底是什么？

我想将帖子 id 从父组件传递给子组件（注释输入），以将 id 彻底的 axios 请求发送到我的控制器。现在我无法将帖子 ID 从父组件发送到子组件。

【参考方案1】：

由于您使用: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> 

然后你可以在组件中使用this.post的prop

我正在稍微重构你的代码，以便于理解

将 postId 作为名为 postId 的 prop 传递，以便于识别

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

然后在你的评论输入组件中像这样声明 props 属性

props: ['postId']

最后是您的评论输入组件

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

输入时不需要额外的 @keyup 事件，因为在表单内的文本输入中按 enter 的默认行为将提交表单

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

【讨论】：

感谢@Vamsi Krishna .. 我错过了'this.post' .. 现在正在工作。但我仍然没有将帖子 ID 传递给控制器​​，它只传递评论。我需要将数据（评论和 post_id）都传递给我的控制器。我也用控制器更新了我的问题..你能检查一下吗？？？

@WahidSherief 对不起我不懂 php

非常感谢兄弟。但它只通过 cmets.. 而不是 postID。我不明白为什么？你可以检查：unsee.cc/gorudema