删除附加到帖子 vue laravel 的特定评论答案

【问题标题】：deleting specific comment that is attached to post vue laravel删除附加到帖子 vue laravel 的特定评论
【发布时间】：2019-12-10 06:56:11
【问题描述】：

我目前正在使用 laravel 创建一个网站，并使用 vue 创建了一个评论系统。我成功地发布了 cmets，但在编辑和删除特定评论时遇到问题。我试图以某种方式检索每个评论的 id，以便我可以创建一个类似于下图中的 postComment() 的方法来删除或编辑特定评论。有谁知道如何做到这一点？提前致谢

这是我的帖子页面，其中包含帖子和附加的 cmets

    <script>
 const app = new Vue({
    el:'#root',
    data: {
        comments: {},
        commentBox: '',
        post: {!! $post->toJson() !!},
        user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!},
    },

    mounted() {
        this.getComments();
    },

    methods: {
        getComments(){
            axios.get('/api/posts/'+this.post.id+'/comments')
                 .then((response) => {
                     this.comments = response.data
                 })
                 .catch(function (error) {
                     console.log(error);
                 });
        },
        postComment(){
            axios.post('/api/posts/'+this.post.id+'/comment', {
                api_token: this.user.api_token,
                text: this.commentBox
            })
            .then((response) => {
                this.comments.unshift(response.data);
                this.commentBox = '';
            })
            .catch(function (error) {
                console.log(error);
            });

        },



    }
});

</script>

【问题讨论】：

这取决于从 API 返回的响应中的内容。在调用 getComments 之后，您将一个数组分配给“cmets”.. 因此，如果这是一个对象数组，您将通过 this.comment.id 访问评论 ID（如果存在），当使用 v-for 循环通过 cmets 时指示。这里没有足够的信息来提供适当的帮助
@paddyfields 当调用 getComment() 方法时，我会得到评论的文本、撰写评论的用户以及提交的日期和时间，并使用 @{{ }}。当我输入@{{comment.id}}时，我可以让评论ID显示在每个评论上，但我试图将它分配给一个变量，以便我可以使用它，但不幸的是我找不到方法，我不知道我能不能做到。如果我理解正确你所说的是在我将创建的 deleteComment() 方法中，我需要创建一个 v-for 指令？
假设您要删除评论，创建一个名为 deleteComment 的新方法，您可以通过 html 模板中删除按钮的 onclick 传递 id，例如）delete comment ...然后将注释 id 传递给您的方法，您可以在其中进行 API 调用并处理删除。 V-for 用在模板中而不是方法中，但如果你设法循环出 cmets，听起来你已经在这样做了
@paddyfields 我试过了，但没用。我添加了一个按钮“”，它传入了评论 ID，我创建了一个方法 deleteComment(comment .id) 接受 comment.id 然后我添加了 "axios.delete('api/posts/'+this.post.id+'/comment'+this.comment.id) .then((response) => { this.commentBox = ''; });"。但它没有用，我在猜测，因为它无法识别评论 ID，但我不确定

标签： laravel vue.js comments

【解决方案1】：

为了编辑或删除评论。您需要该评论的 ID。我在下面创建了一个非常粗糙的 UI 用于删除。更新需要更复杂的处理，但你明白了：

<ul>
    <!-- If the comments is an object, pls use Object.values(comments) -->
    <li v-for="comment in comments">{{comment.text}} <button @click="deleteComment(comment.id)">Delete</button>
</ul>

<script>
 const app = new Vue({
    // ...
    methods: {
        deleteComment(commentId) {
            // ...    
        }
    }
});

</script>

【讨论】：

我已经在使用 v-for 来显示 cmets。但是我的评论 ID 有问题。如您所说，我将其添加到按钮中，但是当我尝试将其添加到方法中时，它不起作用。例如，在 deleteComment(comment.id) 中，当我在其中添加 id 时，由于某种原因，我什至无法显示 cmets，并且当我按下删除按钮时，没有任何效果。我调试了代码，在 cmets 数组的根目录中我有 id 问题是我无法让它工作
你使用 vue 开发工具吗？ cmets数组是空的还是有数据的？
是的，我愿意。该数组具有注释组件“id、post_id、文本、日期”等
当我写 {{comment.id}} 时，我收到“未定义常量”的错误，但是当我写 @ {{ comment.id }} 时，我会在屏幕上打印出评论 ID .我不知道如何将它分配给按钮，如果你能做到这一点

【解决方案2】：

您必须使用 PUT 请求更新数据，使用 Delete 请求删除数据。我编辑了你的代码。

 <script>
  const app = new Vue({
    el:'#root',
    data: {
        comments: {},
        commentBox: '',
        post: {!! $post->toJson() !!},
        user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!},
    },

    mounted() {
        this.getComments();
    },

    methods: {
        deleteComments(){
            axios.delete('/api/posts/'+this.post.id+')
                 .then((response) => {
                    console.log('Success")
                 })
                 .catch(function (error) {
                     console.log(error);
                 });
        },
        updateComment(){
            axios.put('/api/posts/'+this.post.id, this.comments)
            .then((response) => {
                console.log('Success")
            })
            .catch(function (error) {
                console.log(error);
            });

        },



    }
});

</script>

我相信你的后端删除api路由是api/posts/{post}

【讨论】：

我的后端路由是 api/post/{post}/comment{comment_id, commentController@destroy} 因为我试图只删除特定的评论。我知道我必须使用 delete 进行删除并使用 put 进行更新，但是按照您关于删除的方式，它不会只是删除特定的帖子吗？提前致谢