Entfernen Sie Objekt aus dem Array mit einer ID Vuejs

Ich mache eine Funktion, um mehr als einen Datensatz basierend auf den ausgewählten Kontrollkästchen zu löschen, aber als ich die ID (nicht das vollständige Objekt) bekomme ich Probleme, es aus dem Array zu entfernen .Entfernen Sie Objekt aus dem Array mit einer ID Vuejs

Jemand kann mir helfen?

JSBin

JS:

new Vue({ 

    el: 'body', 

    data: { 
    record: {}, 
    selected: [], 
    list: [ 
     { name: 'Google', id: 1, cat: 'Category 1' }, 
     { name: 'Facebook', id: 2, cat: 'Category 2' }, 
     ], 
    }, 

    methods: { 
    deleteSelected: function() { 
     for (var r in this.selected) { 
     this.list = this.list.filter(function(val, i) { 
      return val.id !== this.selected[r]; 
     }); 
     } 
    } 
    } 

});

HTML:

<body> 

    <div class="container"> 

    <div class="row p-10"> 
     <div class="col-md-6 m_md_bottom_15"> 
     <span class="btn btn-danger" data-toggle="tooltip" data-original-title="Delete" @click="deleteSelected()">Remove selected</i></span> 
     </div> 
    </div> 
    <hr> 
    <table class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
     <th></th> 
     <th>Id</th> 
     <th>Name</th> 
     <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr v-for="r in list"> 
     <td><input type="checkbox" v-model="selected" value="{{ r.id }}"></td> 
     <td class="text-center" style="width:90px"> {{ r.id }} </td> 
     <td> {{ r.name }} </td> 
     <td class="text-center" style="width:90px"> 
      <span class="btn btn-warning btn-xs" @click="edit(r)"><i class="fa-fw fa fa-pencil"></i></span> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
    </div> 

    <div class="container"> 
    <pre>{{ $data | json }}</pre> 
    </div> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script> 
</body>

Quelle

2016-04-01 Gustavo Bissolli

Bitte Fügen Sie Ihren Code immer in Ihre Frage ein. – nils

Ok Nils! Es tut uns leid! –

Es gibt zwei Hauptprobleme mit Ihrem Code, einer von ihnen, die bereits von JS Bin markiert ist:

Sie sollten keine Funktionen innerhalb einer Schleife definieren, wenn sie auf den Schleifenwert verweisen. See here why. (Es sei denn, Sie wickeln es in ein IIFE ein oder verwenden Sie let, um Ihre Schleifenvariable zu definieren).
Sie vergleichen eine ID des Typs Number mit einem ausgewählten Eintrag vom Typ String mit dem Operator !==. This wont work, because !== does a strict equal. (Sie können das in Ihrem container Ausgang sehen).

das erste Problem zu beheben, würde ich das äußert for Schleife vollständig und indexOf in this.selected, wenn die aktuellen val.id vorhanden überprüfen verwenden verzichten.

this.selected.indexOf(val.id) === -1;

Dies wird nicht funktionieren noch, weil wir immer noch ein String mit einem Number in indexOf zu vergleichen. Also müssen wir die val.id in eine Zeichenfolge umwandeln (was das Problem # 2 behebt).

this.selected.indexOf(val.id.toString()) === -1;

Was uns mit dem folgenden Code verlässt (nach der for Schleife zu entfernen):

new Vue({ 

    el: 'body', 

    data: { 
    record: {}, 
    selected: [], 
    list: [ 
     { name: 'Google', id: 1, cat: 'Category 1' }, 
     { name: 'Facebook', id: 2, cat: 'Category 2' }, 
     ], 
    }, 

    methods: { 
    deleteSelected: function() { 
     this.list = this.list.filter(function(val, i) { 
      return this.selected.indexOf(val.id.toString()) === -1; 
     }, this); 
    } 
    } 

});

Hinweis: Um die this Rahmen der vue Komponente innerhalb der filter Funktion zu nutzen, we pass it in as the second argument.

JS Bin

Quelle

2016-04-01 22:00:05 nils

Große Erklärung Nils! Falls ich eine HTTP-Anfrage machen muss, um es aus meiner Datenbankbasis zu löschen, bevor ich das Element aus dem Array entferne, sollte ich es innerhalb des Filters machen? –

Ist das richtig? ** [JS Bin] (http://jsbin.com/sakaho/edit?js,output) ** –

Vielen Dank für die folgende Frage. Um zukünftigen Besuchern dieser Frage eine klare Antwort zu geben, wäre es jedoch am besten, wenn Sie weitere Fragen in einer separaten Frage stellen würden (was es auch einfacher macht, über Suchmaschinen zu finden). Und wenn meine Antwort Ihre erste Frage gelöst hat, können Sie die Antwort verbessern und sie als korrekt markieren (mit dem Häkchen). Siehe: http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – nils

Entfernen Sie Objekt aus dem Array mit einer ID Vuejs

Antwort

Verwandte Themen