Як видалити елемент з масиву у Vue.js

Я новачок у vue.js (2) і зараз працюю над простим додатком для подій. Мені вдалося додати події, але тепер я хотів би видалити події, натискаючи на кнопку.

HTML

    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

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

});

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

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

Перевантаження:

array.splice (початок)

array.splice (start, deleteCount)

array.splice (старт, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)

Пуск означає індекс, який ви хочете запустити, а не елемент, який ви хочете видалити. І ви повинні передати другий параметр 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"
...

<button ... @click="deleteEvent(index)"

І:

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

Ви також можете використовувати. $ Delete:

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

джерела:

• https://vuejs.org/v2/api/#Vue-delete
• https://medium.com/vuejs-tips/tip-3-deleting-array-index-in-vue-js-8cc31d7214bf

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

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

Шаблон

<div v-for="(item, index) in items" :key="item.id">
  <input v-model="item.value">
   <button @click="deleteItem(index)">
  delete
</button>

сценарій

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

Це навіть смішніше, коли ви робите це із входами, тому що вони повинні бути пов'язані. Якщо вас цікавить, як це зробити у Vue2 з опціями вставлення та видалення, перегляньте приклад:

будь ласка, подивіться скрипку js

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>

Ви можете видалити елемент за допомогою ідентифікатора

<button @click="deleteEvent(event.id)">Delete</button>

Всередині вашого коду JS

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

Vue обертає методи мутації спостережуваного масиву, щоб вони також ініціювали оновлення подання. Натисніть тут, щоб отримати докладнішу інформацію.

Ви можете подумати, що це призведе до того, що Vue викине існуючий DOM і повторно відтворить весь список - на щастя, це не так.

<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>

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

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

Зрощування - це найкраще для вилучення елемента з певного індексу. Наведений приклад перевірено на консолі.

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"
...
<button ... @click="$delete(events, index)">