HTTP-Anfrage, um Datensatz zu entfernen und dann Obj aus Array Vue.js

Question

Diese Frage kam nach der Lösung this problem dank @ Nils und ich hoffe, jemand kann mir helfen!

Eigentlich habe ich eine Liste von Datensätzen und ich kann einige von dann auswählen und diese mit einem Klick entfernen.

Der obige Code funktioniert wie es sein sollte, aber ich bin nicht sicher, ob das, was ich tue, richtig ist oder wenn es jederzeit brechen kann!

Also ich mache die HTTP-Anfrage, um den Datensatz innerhalb der Array.filter() zu löschen ... ist das richtig? Ich fühle, dass es nicht stimmt!

deleteSelected() { 
    this.list = this.list.filter(function(val, i) { 
    var id = val.id.toString(); 

    if (this.selected.indexOf(id) === -1) { 
     return true; 
    } else { 

     this.$http.delete('/sources/' + id) 
     .then(function() { 
      return false; 
     }, function() { 
      return true; 
     }); 

    } 
    }, this); 

    this.selected = []; 
}, 

Das Array this.list ist, wo meine Liste der Objekte und die this.selected Array enthält die ID des ausgewählten entfernt werden sollen.

Dann, wenn die HTTP-Anfrage OK geht, entferne ich das Obj und wenn nicht, behalte ich es!

Wie denkst du ist ein guter Weg, das zu tun?

--------- --------- EDIT

ein JSBin Hinzufügen klar zu sein, was ich brauche!

Eigentlich habe ich gerade ein Problem mit meinem Skript gefunden ... Es wartet nicht auf die Ajax - Antwort, um das Objekt aus dem Array zu entfernen. Wenn also einige dieser Datensätze nicht gelöscht werden konnten, werden sie aus dem entfernt Array auch

Jemand?

JS Bin

Answer 1

Wie ich dachte, dass der Code nicht funktioniert hat, aber ich fand eine gute Lösung!

Es funktioniert nicht, weil es eine Masse ist jeder löschen, so löscht, ist ein Wunsch, aber ich habe auf einmal gemacht jedem und das Skript wartet nicht auf die Antwort das Element aus der Liste zu entfernen! Wenn der Datensatz nicht durch eine Validierung gelöscht wird, wird er ebenfalls aus der Liste entfernt.

Also, was ich tat, ist es, alle Löschanfragen senden und wenn das letzte Finish ich einen neuen Antrag stellen, um ganze Liste zu erhalten aktualisiert! Hier

ist der Code:

// block the records list 
$(this.$els.dataGrid).block(); 

// init a counter 
var itemsProcessed = 0; 

// get length of records to be deleted 
var length = this.selected.length; 

// looping to delete one for each 
this.selected.forEach((item) => { 

    // removeLossReasonById() is a method that mand the HTTP DELETE request and then() 
    this.removeLossReasonById(item).then((response) => { 

    // if does not delete for any reason show a notify 
    if (!response.ok) 
     $.Notification.error(response.data); 

    // increment the counter 
    itemsProcessed++; 

    // if is the last iteration it's gonna unblock the records list and clear my array of items to be removed 
    if (itemsProcessed === length) { 
     this.selected = []; 
     this.getLossReasons().then(() => $(this.$els.dataGrid).unblock()); 
    } 
    }); 
}); 

Hoffe, dass es jemand hilft!

Answer 2

Was ich tue, ist so etwas wie:

<ul> 
    <li v-for="item in list" @click="deleteItem(item)"></li> 
</ul> 

Also im Grunde Sie das Listenelement in die Lösch-Methode übergeben, die wiederum tut:

deleteItem: function(item) { 
    # Ajax delete request 
    .successs(
     this.list.$remove(item); 
    ) 

Heißt das, lösen Sie Ihre Problem?