Как удалить элементы из отфильтрованных данных - Vue.js 2.x

Question

Как удалить элементы из отфильтрованных данных - Vue.js 2.x

1

Внутри нового 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>

Спасибо за чтение

Francis Goris 02 июнь 2017, в 23:13

Источник

Теги:

javascript

vue.js

2 ответа

2

Не передавайте индекс.

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)">

Пример.

Bert 02 июнь 2017, в 18:43

0

Берт Эванс, это тоже работает. Большое спасибо.
Francis Goris 02 июнь 2017, в 21:23

Ещё вопросы

Берт Эванс, это тоже работает. Большое спасибо.

nhydock · Accepted Answer · 2017-06-02T19-06-00.000Z

Вместо того, чтобы использовать индекс из фильтрованных списков, вы должны использовать индекс из списка студентов. Просто выполните this.students.splice(this.students.indexOf(student), 1)