Comment supprimer un élément d'un tableau en Vue.js

je suis nouveau à vue.js (2) et je suis actuellement en train de travailler sur un événement simple application. J'ai réussi à ajouter des événements, mais maintenant, je voudrais supprimer des événements sur la base de cliquer sur un bouton.

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

});

j'ai essayé de passer l'événement à la fonction et de supprimer celle-ci avec la fonction slice, j'ai pensé que c'était ce code pour supprimer certaines données du tableau. Quelle est la meilleure façon en cleanest de supprimer des données du tableau avec un bouton simple et événement onclick?

25
demandé sur bbholzbb 2017-03-27 15:22:08
la source

4 ответов

vous utilisez splice d'une mauvaise manière.

Les surcharges sont:

array.splice(démarrer)

array.splice(démarrer, deleteCount)

array.splice(démarrer, deleteCount, item1, item2 ...)

Départ de l'index que vous souhaitez démarrer, pas l'élément que vous voulez supprimer. Et vous devez passer à la deuxième paramètre deleteCount 1, ce qui signifie: "je veux supprimer 1 élément départ à l'index {commencer."}

Afin de mieux vous aller avec:

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

aussi, vous utilisez un paramètre, donc vous y accédez directement, pas avec this.event.

mais de cette façon vous chercherez inutile pour le indexOf dans chaque delete, pour résoudre ceci vous pouvez définir le index variable v-for, puis passez-le à la place de l'objet event.

C'est:

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

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

Et:

deleteEvent: function(index) {
  this.events.splice(index, 1);
}
49
répondu Edmundo Rodrigues 2018-06-12 18:33:43
la source

Vous pouvez également utiliser .$supprimer:

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

sources:

5
répondu Katinka Hesselink 2018-06-28 15:52:22
la source

C'est encore plus amusant quand vous le faites avec des entrées, parce qu'ils doivent être liés. Si vous êtes intéressé comment faire dans vue2 et avoir des options pour insérer et supprimer:

regardez js fiddle

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/[email protected]/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>
3
répondu Yevgeniy Afanasyev 2018-07-10 09:03:35
la source

N'oubliez pas de lier attribut clé sinon toujours dernier élément sera supprimé

corriger la façon de supprimer l'élément sélectionné dans le tableau:

Template

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

script

deleteItem(index) {
  this.items.splice(index, 1); \OR   this.$delete(this.items,index)
 \both will do the same
}
0
répondu Afraz Ahmad 2018-09-08 12:31:33
la source

Autres questions sur