2

Estoy programando un crud con vuejs (stack MEVN) utilizando como base este. No encuentro ningún tutorial o ejemplo que elimine o edite varios elementos de la lista a la vez. ¿Cuál sería la manera correcta de seleccionar varios elementos de la lista y eliminarlos o editarlos todos juntos? Se me han ocurrido dos opciones:

  1. Cada elemento de la lista tenga una variable booleana "selected": no me convence porque al presionar el botón eliminar la base de datos tendría que recorrer todos los elementos.
  2. guardar los items seleccionados en un array "selected".[]

Me parece que lo correcto sería lo segundo... ¿Es así o hay una mejor manera?

Aquí está mi componente de momento:

<template>
    <div>
    <nav>Tabla de comandos</nav>
    <div v-for="task of tasks" draggable="true">
        <p>titulo: {{task.title}}
            description : {{task.description}} </p>
        <hr>
    </div>
    <form @submit.prevent="sendTask">
    <button>lista</button>
    <button>etiqueta</button>
    <input type="text" v-model="task.title" placeholder="Inserte una tarea">
    <button class="InputAddOn-item">fecha</button>
    <input type="submit" hidden/>
    </form>
    </div>
</template>

<script>
class Task {
  constructor(title = '', description = '') {
    this.title = title;
    this.description = description;
  }
}

export default {
    data() {
        return{
            task: new Task(),
            tasks: [],
            selectedTasks: [],
            }
        },
    created() {
    this.getTasks();
    },
    methods: {
        sendTask() {
        fetch('/api/tasks', {
          method: 'POST',
          body: JSON.stringify(this.task),
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        })
          .then(res => res.json())
          .then(data => {
            this.getTasks();
            this.task = new Task();
          });
    },
    getTasks() {
      fetch('/api/tasks')
        .then(res => res.json())
        .then(data => {
          this.tasks = data;
        });
    },
    }
}
</script>

1
  • las dos son correctas. pero sin ver un poco mas lo que estas haciendo, es dificil darte una respuesta mas acertada
    – gbianchi
    el 3 ene. 2019 a las 3:05

1 respuesta 1

1

Lo suyo es la segunda opción, además si sólo guardas los ids:

selected: [1,2,43]

será mucho más facil para la base de datos, ya que le pasas el array de ids estilo (mysql y similares):

Delete from my_table where id in (1,2,43);

Edit

para mongo debería ser algo así:

db.my_table.remove({'_id':{'$in':selected}})
4
  • Respuesta perfecta, muchas gracias! el 4 ene. 2019 a las 11:56
  • Márcala como correcta @german, gracias. el 4 ene. 2019 a las 12:00
  • Lo he hecho... pero no figura hasta que consiga 15 pts de reputación. soy nuevo en esto :) el 4 ene. 2019 a las 12:32
  • ok, ánimo! saludos. el 4 ene. 2019 a las 12:33

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.