I am using partially VueJS
in Laravel.
In blade:
@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>{{Carboncarbon::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
Rendered Output:
<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>
In js file:
updateMileageLogV2: function updateMileageLogV2(id, event){ let item_id = id; var $this = this; $this.remove(); }
My question is:
When I click on Complete button then the corresponding row should delete. But unfortunately it is not working.
Answer
Finally, I have found solution.
I write this line in VueJs
method:
event.path[2].remove();
In VueJs Method:
updateMileageLogV2: function updateMileageLogV2(id, event){ let item_id = id; event.path[2].remove();// remove current tr row on click. }
Explanation:
See in screenshot, event.path
has array of DOM list.
- At 0 index
a tag
- At 1 index
td tag
- AT 2 index
tr tag