為此，我正在填充推送并為每一行添加一個索引，我需要的是洗掉該行。
addTrabajo(state) {
state.trabajos.push({
vehicle_id: state.newOrdenTrabajo.vehicle_id,
km: state.newOrdenTrabajo.km,
descripcion: state.newOrdenTrabajo.descripcion,
})
},
OrdenTrabajo.vue
<table class="table table-hover table-striped mt-3 table-sm text-white bg-dark">
<thead>
<tr>
<th>#</th>
<th>Trabajo</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(trabajo, index) in trabajos" :key="index">
<td>{{index 1}}</td>
<td>{{ trabajo.descripcion }}</td>
<td>
<a
href="#"
class="btn btn-danger btn-sm"
@click.prevent="removeFromTrabajo({ id: index 1 })"
data-toggle="tooltip"
data-placement="top"
title="Eliminar">
<i class="fas fa-ban"></i>
</a>
</td>
</tr>
</tbody>
</table>
腳本.js
removeFromTrabajo(state, data) {
let found = state.trabajos.indexOf(data.id)
state.trabajos.splice(found)
},
問題是，在淘汰時，最后一個被淘汰，盡管它不是被選中的。例如：我選擇了第一個，但最后一個正在被洗掉。
uj5u.com熱心網友回復：
您只需要將 傳遞index給函式。在removeFromTrabajo您可以使用 直接訪問串列this.trabajos，檢查它的專案是否存在，然后使用
所以你應該只收到一個帶有 an 的引數，id你應該洗掉：
removeFromTrabajo(data) {
console.log(this.trabajos);
this.trabajos = this.trabajos.filter((o, index) => data.id !== index 1);
},
uj5u.com熱心網友回復：
您需要做的只是從模板中傳遞適當的索引，然后在方法中使用它
new Vue({
el: "#table",
data: () => ({
trabajos: [ { descripcion: 'abc' }, { descripcion: 'def' }, { descripcion: 'ghi' } ]
}),
methods: {
/** Changes added in below function **/
removeFromTrabajo(index) {
this.trabajos.splice(index, 1); // 1 indicates the number of element to be removed and index indicates the position from where it has to be removed
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<table id="table" class="table table-hover table-striped mt-3 table-sm text-white bg-dark">
<thead>
<tr><th>#</th> <th>Trabajo</th><th></th></tr>
</thead>
<tbody>
<tr v-for="(trabajo, index) in trabajos" :key="index">
<td>{{index 1}}</td>
<td>{{ trabajo.descripcion }}</td>
<td>
<a
href="#"
class="btn btn-danger btn-sm"
@click.prevent="removeFromTrabajo(index)" // change added here
data-toggle="tooltip"
data-placement="top"
title="Eliminar">
<i class="fas fa-ban" style="color=red;"></i>
</a>
</td>
</tr>
</tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380343.html
標籤：javascript Vue.js
下一篇：根據條件查找所有索引