javascript - 如何使用 vuejs 删除表中的当前 tr 行

问题描述

我VueJS在 Laravel 中部分使用。

在刀片中：

@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();
}

我的问题是：

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

标签： javascriptjquerylaravelvue.js

最后，我找到了解决方案。

我在方法中写了这一行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

javascript - 如何使用 vuejs 删除表中的当前 tr 行

问题描述

解决方案

推荐阅读