Внутри нового Vue ({}) я использую следующий код для создания двух списков студентов по голосам. Как избежать дублирования метода delete() для удаления одного студента.
Список с количеством голосов:
data: {
students:
[{
'name': 'Jose',
'last_name': 'Aris',
'document': '201700154',
'campus': 1,
'votes': 0,
},
{
'name': 'Manuel',
'last_name': 'Hernadez',
'document': '201700195',
'campus': 2,
'votes': 3,
},],
},
Фильтры:
computed:
{
voted: function ()
{
return this.students.filter((student) => {
return student.votes >= 1;
});
},
unvoted: function ()
{
return this.students.filter((student) => {
return student.votes <= 0;
});
},
},
Проблема возникает, когда два фильтра имеют одинаковые элементы индекса:
methods:
{
remove (student, index)
{
if (!confirm('Are you sure want to delete ${student.name} ${student.last_name}?'))
{
return;
}
this.students.splice(index, 1);
},
}
Наконец, список HTML:
<div class="col-md-12">
<h4>LIST VOTED</h4>
<ul class="list-group">
<li v-for="(student, index) in voted" class="list-group-item">
{{index}} {{student.name}} {{student.last_name}} / {{student.document}} <vote :student="student" class="pull-right"></vote>
<a href="" class="btn btn-danger" @click.prevent="remove(student, index)">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
<div class="col-md-12">
<h4>LIST UNVOTED</h4>
<ul class="list-group">
<li v-for="(student, index) in unvoted" class="list-group-item">
{{index}} {{student.name}} {{student.last_name}} / {{student.document}} <vote :student="student" class="pull-right"></vote>
<a href="" class="btn btn-danger" @click.prevent="remove(student, index)">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
</li>
</ul>
</div>
Спасибо за чтение
Вместо того, чтобы использовать индекс из фильтрованных списков, вы должны использовать индекс из списка студентов. Просто выполните this.students.splice(this.students.indexOf(student), 1)
Не передавайте индекс.
remove (student)
{
if (!confirm('Are you sure want to delete ${student.name} ${student.last_name}?'))
{
return;
}
const index = this.students.findIndex(s => s === student)
this.students.splice(index, 1);
},
В вашем шаблоне.
<a href="" class="btn btn-danger" @click.prevent="remove(student)">