Agregar y quitar
Clase 17 de 21 • Curso Práctico de Vue.js
Contenido del curso
Eduardo Razo Cobián
student•
hace 4 años
Miguel Angel Reyes Moreno
student•
hace 4 años
Josue Cerron Tuesta
student•
hace 3 años
Clase 17 de 21 • Curso Práctico de Vue.js
Contenido del curso
Eduardo Razo Cobián
Miguel Angel Reyes Moreno
Josue Cerron Tuesta
Jahiker Rojas
Carlos Rodríguez
Francisco Ruiz
Josue Cerron Tuesta
Guillermo Mata
SEG TI
Jose Ever Muñoz Muñoz
Hans González
Para gener un número a partir de la fecha, solo agreguen .getTime(), ejemplo:
saveMovement(movement) { //Generamos el id movement.id = new Date().getTime(); //Agregamos la fecha del movimiento movement.time = new Date(); //Validamos si es ingreso o gasto movement.type == "gasto" ? (movement.amount = movement.amount * -1) : ""; this.$emit("saveMovement", movement); this.showModal = false; },
Me robaste el comentario jajaj
id: new Date().getTime(),
Grande bro!
Personalmente me gusta mas eliminar elementos de un array como lo hace el profesor Oscar Barajas, les dejo aqui mi metodo remove por si lo quieren probar
remove(id) { this.movements = this.movements.filter(m => m.id != id); }
Yo he creado la generación del id de forma autoincremental, es decir el id máximo de los movimientos le sumamos 1 desde el componente padre! El la parte de remover id, lo hice con el método filter. Aquí mi reposiorio. . Repositorio commit actual: Click aquí
Personalmente preferi cambiar en el formulario de variables reactivas a un objeto reactivo. Creo que es mas facil y directo para trabajar con los formularios en general, asi no tenemos inicializada una variable por field del form y a su vez luego no tenemos que crear un objeto al hacer submit sino que simplemente mandamos el objeto reactivo en cuestion
<script setup> import { ref, reactive, defineEmits } from "vue"; import Modal from "@/components/Modal.vue"; const showModal = ref(false); const emit = defineEmits(["create"]); const newMovement = reactive({ title: "", description: "", amount: "", movementType: "Ingreso", time: new Date(), }); const submit = () => { showModal.value = false; newMovement.amount = newMovement.movementType === "Ingreso" ? newMovement.amount : -newMovement.amount; emit("create", newMovement); }; </script>```
Gracias!
Una forma sencilla es buscar el id máximo y sumarle 1:
const newId = this.movements.reduce((maxId, movement) => {
return movement.id > maxId ? movement.id : maxId; }, 0) + 1;
Aquí mi ejemplo de crear un ID a partir del id actual y ultimo de la lista (array).
Para que id sea un número y no una fecha pueden usar los métodos del objeto Date para obtener un número a partir de esa fecha así:
id: new Date().getMilliseconds(), ```Recordar que esto se pone dentro de Action.vue en la función submit.
Yo tengo problemas al agrearlo, me sale vacio, cuando le hago guardar movimiento :(