Я новичок в 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?
javascript
vuejs2
Giesburts
источник
источник
Ответы:
Вы
splice
неправильно используете.Перегрузки:
Начало означает индекс, который вы хотите начать, а не элемент, который вы хотите удалить. И вы должны передать второй параметр
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); }
источник
v-for
» :) Мне нравится ТАК из-за таких драгоценных камней.Вы также можете использовать. $ Delete:
remove (index) { this.$delete(this.finds, index) }
источники:
источник
Не забудьте привязать ключевой атрибут, иначе всегда будет удален последний элемент
Правильный способ удалить выбранный элемент из массива:
Шаблон
<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>
источник
Вы можете удалить элемент через id
<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)
источник
Почему бы просто не опустить метод полностью, например:
v-for="(event, index) in events" ... <button ... @click="$delete(events, index)">
источник