javascript - Hvordan fjerne et element fra en array i Vue.js

Jeg er ny på vue.js (2) og jeg jobber for tiden med en enkel arrangementapp. Jeg har klart å legge til arrangementer, men nå ønsker jeg å slette arrangementer ved å klikke på en knapp.

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

});

Jeg har prøvd å sende hendelsen til funksjonen og så slette den med slice-funksjonen, jeg trodde det var den koden for å slette noen data fra arrayet. Hva er den beste og reneste måten å slette data fra arrayet med en enkel knapp og onclick-hendelse?

Svar #1

Du bruker splice på en feil måte.

Overbelastningene er:

array.splice(start)

array.splice(start, deleteCount)

array.splice(start, deleteCount, elementForSettInnEtterSletting1, elementForSettInnEtterSletting2, ...)

Start betyr indeksen du ønsker å starte fra, ikke elementet du ønsker å fjerne. Og du bør sende den andre parameteren deleteCount som 1, som betyr: «Jeg vil slette 1 element startende fra indeksen {start}».

Så det er bedre at du går med:

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

Også, du bruker en parameter, så du får tilgang til den direkte, ikke med this.event.

Men på denne måten vil du se opp unødvendig for indexOf ved hver sletting. For å løse dette kan du definere index-variabelen i din v-for, og deretter sende den i stedet for hendelsesobjektet.

Det vil si:

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

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

Og :

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

Svar #2

Du kan også bruke .$delete:

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

kilder :

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

Svar #3

Ikke glem å binde key-attributtet, ellers vil alltid det siste elementet bli slettet

Korrekt måte å slette valgt element fra array:

Mal

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

manus

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

Relaterte artikler