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:
- 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.
- 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>