如何使用 vuejs 删除表中的当前 tr 行答案

【问题标题】：How to remove current tr row in table using vuejs如何使用 vuejs 删除表中的当前 tr 行
【发布时间】：2019-12-17 19:43:55
【问题描述】：

我在 Laravel 中使用了部分 VueJS。

在刀片中：

@foreach ($mileagelogv2 as $mileage)
        <tr>
            <td>@if(isset(json_decode($mileage->data)->driver_name) && !empty(json_decode($mileage->data)->driver_name))
                {{json_decode($mileage->data)->driver_name}}
                @else
                --
                @endif
            </td>
            <td>@if(isset(json_decode($mileage->data)->date) && !empty(json_decode($mileage->data)->date))
                {{json_decode($mileage->data)->date}}
                @else
                --
                @endif
            </td>
            <td>{{\Carbon\carbon::parse($mileage->created_at)->format('d/m/Y H:i:s')}}</td>
            <td>{{$mileage->createdBy->name}}</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit
                "                
                @click="updateMileageLogV2({{$mileage->id}}, $event)"
                >
                Complete
            </a>             
        </td>
        </tr> 
        @endforeach

渲染输出：

<table class="mileagelogv2_panel">
    <thead>
        <tr>

            <th>Driver Name</th>
            <th>Date</th>
            <th>Created At</th>
            <th>Created By</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody class="mileagelogv2_panel">
                        <tr>
            <td>                Testing 2 u
                            </td>
            <td>                10/08/2019
                            </td>
            <td>10/08/2019 07:45:49</td>
            <td>Gufran Hasan</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit
                ">
                Complete
            </a>             
        </td>
        </tr> 
                <tr>
            <td>                Testing 2
                            </td>
            <td>                10/08/2019
                            </td>
            <td>10/08/2019 07:45:08</td>
            <td>Gufran Hasan</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit
                ">
                Complete
            </a>             
        </td>
        </tr> 
                <tr>
            <td>                Testing
                            </td>
            <td>                10/08/2019
                            </td>
            <td>10/08/2019 07:25:28</td>
            <td>Gufran Hasan</td>
            <td>
            <a class="
                list__item__actions__btn
                list__item__actions__btn--edit

                ">
                Complete
            </a>             
        </td>
        </tr> 

    </tbody>
</table>

在js文件中：

updateMileageLogV2: function updateMileageLogV2(id, event){
        let item_id = id;
        var $this = this;
        $this.remove();
}

我的问题是：

当我点击完成按钮时，相应的行应该被删除。但不幸的是，它不起作用。

【问题讨论】：

标签： javascript jquery laravel vue.js

【解决方案1】：

终于找到了解决办法。

我在VueJs方法中写下这一行：

event.path[2].remove();

在 VueJs 方法中：

updateMileageLogV2: function updateMileageLogV2(id, event){
        let item_id = id;

        event.path[2].remove();// remove current tr row on click.

}

解释： 见截图，event.path 有一个 DOM 列表数组。

在 0 索引处a tag
在 1 个索引处 td tag
AT 2 索引tr tag

【讨论】：