时间戳

首页 > 解决方案 > 如何能够编辑和删除卡片内的内容？Laravel - vue.js

laravel - 如何能够编辑和删除卡片内的内容？Laravel - vue.js

问题描述

我正在创建一个包含评论和回复的讨论论坛，我曾经在表格中显示它们，但我已经改变并且现在使用卡片来显示它们，如下所示： 在此处输入图像描述

这是我可以正确显示回复，但是现在我不确定如何删除或编辑用户发表的评论，或回复其他评论。需要注意的是，我没有显示回复按钮，但在父评论上会有一个，我不确定如何编写回复回复的逻辑。

这是用于删除表格行、编辑表格行和回复的功能性 vue.js 代码。我正在使用对话框来获取用户输入。

openReply(row) {
    this.dialogReplyVisible = true;
    this.parent = row;
},
edit(model) {
    this.mode = 'Editar';
    this.form = _.cloneDeep(model);
    this.dialogFormVisible = true;
},
remove(row) {
    this.$confirm('Desea borrar este Comentario? Esto es permanente.',
        'Advertencia', {
            confirmButtonText: 'Si',
            cancelButtonText: 'Cancelar',
            cancelButtonClass: 'el-button--info',
            confirmButtonClass: 'el-button--warning',
            type: 'warning'
        }).then(() => {
        this.loading = true;
        this.$inertia.delete(this.baseUrl + '/' + row.id)
            .then(
                () => {
                    this.$message({
                        type: 'success',
                        message: 'Eliminado correctamente.'
                    });

                    this.comments = this.$page.comments;
                    this.loading = false
                },
                (res) => {
                    this.$message.error(parseError(res)[0]);
                    this.loading = false;
                }
            )
    })
},

web.php 上的路由

Route::post('comments/update/{id}', 'ReplyController@update');
Route::post('comments/reply', 'ReplyController@replyStore');
Route::post('comments/reply/update/{id}', 'ReplyController@replyUpdate');
Route::resource('comments', 'ReplyController'); //this does the store and delete

这些是调用这些方法的按钮

<div class="btn-link-edit action-button"
    @click="edit(scope.row)">
    <i class="fas fa-pencil-alt"></i>
</div>
<div class="btn-link-delete action-button"
    @click="remove(scope.row)">
    <i class="fas fa-trash"></i>
</div>
<div class="btn-link-preview action-button"
    @click="openReply(scope.row)">
    <i class="fas fa-reply"></i>
</div>

其他相关数据是它试图克隆的形式和基本 url

form: {
    comment: '',
},
replyForm: {
    comment: '',
},
baseUrl: '/comments',
customUpdateUrl: '/comments/update',

所以我的最后一个问题是如何更改这些编辑、删除和回复功能，以使其与卡片而不是表格一起使用。

编辑：我得到了删除功能

标签： laravelvue.js

解决方案

代码本身仍然很好，我只需要更改我发送的参数即可。我不知道model它要求的基本上只是一个对象，所以我只是发送我想要的对象进行编辑和回复，而对于删除，我只是通过了 id 并更改了 post url

 this.$inertia.delete(this.baseUrl + '/' + row.id)

至

 this.$inertia.delete(this.baseUrl + '/' + id)

我也可以直接发送对象，因为无论如何它都会在发送它时使用 id。

带有新参数的按钮

<div class="btn-link-preview action-button"
    @click="openReply(comment)">
    <i class="fas fa-reply"></i>
</div>
<div class="btn-link-edit action-button"
    @click="edit(comment)">
    <i class="fas fa-pencil-alt"></i>
</div>
<div class="btn-link-delete action-button"
    @click="remove(comment.id)">
    <i class="fas fa-trash"></i>
</div>

这是里面comment没有回复的东西，虽然我发送的对象

{ 
   "id":8,
   "user_id":24,
   "discussion_forum_id":1,
   "parent_id":null,
   "comment":"adsfadsfasdf",
   "comment_time":"2019-12-03 14:55:09",
   "created_at":null,
   "updated_at":null,
   "user":{ 
      "id":24,
      "name":"Vinny Ridley",
      "card":"12353",
      "scard":"97524",
      "user_type_id":4,
      "email":"v@email.com",
      "created_at":"2019-12-02 13:07:37",
      "updated_at":"2019-12-02 13:07:37"
   },
   "replies":[ 

   ]
}

为了编辑和删除我刚刚发送的回复，reply或者reply.id就可以了。希望这可以帮助遇到相同或类似问题的人。

推荐阅读