Я новичок в vue.js (2), и в настоящее время я работаю над простым приложением для событий. Мне удалось добавить события, но теперь я хотел бы удалить события по нажатию кнопки.

HTML

    

{{ event.name }}

{{ event.date }}

{{ event.description }}

JS (Vue)

new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' }
    },

    ready: function() {

    },

    methods: {

        deleteEvent: function(event) {
                this.events.splice(this.event);
        },

        // Adds an event to the existing events array
        addEvent: function() {
            if(this.event.name) {
                this.events.push(this.event);
                this.event = { name: '', description: '', date: '' };
            }
        }

    } // end of methods

});

Я попытался передать событие функции, а затем удалить его с помощью функции среза, я подумал, что это тот код для удаления некоторых данных из массива. Каков наилучший и самый чистый способ удаления данных из массива с помощью кнопки simpleb и события onclick?

Giesburts

Ответов: 8

Ответы (8)

Вы неправильно используете splice.

Перегрузки:

array.splice (начало)

array.splice (начало, deleteCount)

array.splice (начало, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)

Start означает индекс, который вы хотите начать, а не элемент, который вы хотите удалить. И вы должны передать второй параметр deleteCount как 1, что означает: «Я хочу удалить 1 элемент, начиная с индекса {start}».

Так что вам лучше использовать:

deleteEvent: function(event) {
  this.events.splice(this.events.indexOf(event), 1);
}

Кроме того, вы используете параметр, поэтому вы получаете доступ к нему напрямую, а не с помощью this.event.

Но таким образом вы будете искать ненужные для indexOf при каждом удалении, для решения этого вы можете определить переменную index в вашем v-for, а затем передать его вместо объекта события.

То есть:

v-for="(event, index) in events"
...

И:

deleteEvent: function(index) {
  this.events.splice(index, 1);
}
Eliminar

А для вашего JS:

this.listaTareas = this.listaTareas.filter(i=>i.id != id)

Splice - лучший способ удалить элемент из определенного индекса. Данный пример протестирован на консоли.

card = [1, 2, 3, 4];
card.splice(1,1);  // [2]
card   // (3) [1, 3, 4]
splice(startingIndex, totalNumberOfElements)

startIndex начинается с 0.

Почему бы просто не пропустить весь метод, например:

v-for="(event, index) in events"
...

Вы также можете использовать. $ Delete:

remove (index) {
 this.$delete(this.finds, index)
}

источники:

Еще смешнее, когда вы делаете это с входами, потому что они должны быть связаны. Если вас интересует, как это сделать в Vue2 с опциями для вставки и удаления, см. Пример:

, пожалуйста, посмотрите js скрипку

новый Vue ({
  el: '#app',
  данные: {
    находит: []
  },
  методы: {
    addFind: function () {
      this.finds.push ({значение: 'def'});
    },
    deleteFind: function (index) {
      console.log (индекс);
      console.log (this.finds);
      this.finds.splice (индекс, 1);
    }
  }
});

Находит

 {{$ data}} 

Вы можете удалить элемент через id


Внутри вашего JS-кода

deleteEvent(id){
  this.events = this.events.filter((e)=>e.id !== id )
}

Vue обертывает методы мутации наблюдаемого массива, поэтому они также будут запускать обновления представления.Щелкните здесь для получения более подробной информации.

Вы можете подумать, что это заставит Vue отбросить существующий DOM и повторно отобразить весь список - к счастью, это не так.

Не забудьте привязать ключ атрибут, иначе всегда последний элемент будет удален

Правильный способ удаления выделенного элемента из массива:

Шаблон

скрипт

deleteItem(index) {
  this.items.splice(index, 1); \\OR   this.$delete(this.items,index)
 \\both will do the same
}

2022 WebDevInsider