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

88

Я новичок в 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

});

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

Giesburts
источник
Отвечает ли это на ваш вопрос? Как удалить конкретный элемент из массива?
понуры-костек

Ответы:

147

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

Перегрузки:

array.splice (начало)

array.splice (начало, 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);
}
Эдмундо Родригес
источник
Здорово, я уже подумал, что неправильно использую splice. Вы можете сказать мне, в чем разница между splice и slice? Благодарность!
Giesburts
1
Конечно. По сути, sPlice изменяет исходный массив, а slice создает новый массив. Подробнее здесь: tothenew.com/blog/javascript-splice-vs-slice
Эдмундо Родригес
Вы также можете использовать $ remove как сокращение.
Крис Диксон,
2
@EdmundoRodrigues, спасибо за это « вы можете определить индексную переменную на своемv-for » :) Мне нравится ТАК из-за таких драгоценных камней.
Валентин Ши
@ Эдмундо Родригес Спасибо. Это было действительно хорошо. Я просто удалял индекс, а не индекс объекта. большое спасибо
priya_21
62

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

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

источники:

Катинка Хесселинк
источник
4
Это правильный путь, поскольку пусть Vue знает о новостях.
insign
1
почему в документации сказано, что «вам редко нужно его использовать», это хорошая практика?
Miguel Stevens
@Notflip: обычно вы просто заменяете массив целиком.
Катинка Хесселинк,
1
почему это не принятый ответ, когда array.splice не работает в vue? @Gijsberts
yellowsir
1
@Roberto slice и splice разные :)
Evil Pigeon
26

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

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

Шаблон

<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
}
Афраз Ахмад
источник
Это действительно должен быть выбранный ответ. Мне было интересно, почему ни один из параметров (splice или $ delete) не работал, и оказалось, что у меня просто не было правильного набора ключей.
Lunyx
Ну, он определенно что-то удалил, но просто начал делать странные вещи, когда привязка еще не была на месте.
DZet
1
Я потратил 4 часа на размышления, почему всегда удалялся последний элемент. Спасибо тебе за это!
Кэрол-Теодор Пелу,
6

Еще смешнее, когда вы делаете это с входными данными, потому что они должны быть связаны. Если вас интересует, как это сделать в 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>

Евгений Афанасьев
источник
это полезно, но вы можете мне помочь? Я застрял при использовании компонента .. codepen.io/wall-e/pen/dQrmpE?editors=1010
w411 3
3

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

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

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

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

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

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

Масум Биллах
источник
1
<v-btn color="info" @click="eliminarTarea(item.id)">Eliminar</v-btn>

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

this.listaTareas = this.listaTareas.filter(i=>i.id != id)
Клаудио Шойерманн
источник
1
Ваш ответ почти такой же, как и у других, но не лучше других. Так что не стоит это публиковать.
foxiris
0

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

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

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

Кошик кремали
источник
0

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

v-for="(event, index) in events"
...
<button ... @click="$delete(events, index)">
Джеймс Джонс
источник