javascript - tutorial - Solicitud de HTTP para eliminar el registro y luego eliminar obj de la matriz Vue.js

vue-resource tutorial

Question

Esta pregunta surgió después de resolver este problema gracias a @nils y espero que alguien me pueda ayudar.

En realidad, tengo una lista de registros y puedo seleccionar algunos de ellos y eliminarlos con un solo clic.

El código anterior funciona como debería pero no estoy seguro si lo que estoy haciendo es correcto o si puede romperse en cualquier momento.

Entonces, estoy haciendo la solicitud HTTP para eliminar el registro dentro de Array.filter () ... ¿es así? ¡Siento que no está bien!

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 = [];
},

La matriz this.list es donde está mi lista de objetos y la matriz this.selected contiene los ID seleccionados para ser eliminados.

Entonces, si la solicitud de HTTP va bien, elimino el obj y si no, ¡lo conservo!

¿Cómo crees que es una buena manera de hacer eso?

---------EDITAR---------

¡Agregar un JSBin para aclarar lo que necesito!

De hecho, acabo de encontrar un problema en mi secuencia de comandos ... No espera a que la respuesta ajax elimine el elemento de la matriz, de modo que si algunos de esos registros no se pueden eliminar, también se eliminará de la matriz.

¿Alguien?

JS Bin

Answer 1

Lo que hago es algo así como:

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

Así que básicamente pasa el elemento de la lista al método de eliminación, que a su vez lo hace:

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

¿Eso resuelve tu problema?

Answer 2

¡Como pensé que el código no funcionaba pero encontré una buena solución!

No funciona porque se trata de una eliminación masiva, por lo que cada eliminación es una solicitud, pero hice todas a la vez y el script no espera la respuesta para eliminar el elemento de la lista. Si el registro no se elimina por alguna validación, también se eliminará de la lista.

Entonces, lo que hice fue enviar todas las solicitudes de eliminación y cuando la última terminó, realicé una nueva solicitud para acceder a toda la lista actualizada.

Aquí está el código:

// 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());
    }
  });
});

Espero que ayude a alguien!