Agregar y quitar

Clase 17 de 21 • Curso Práctico de Vue.js

Francisco Javier Cervantes Candelario

student•

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;
    },

Miguel Angel Reyes Moreno

student•

Me robaste el comentario jajaj

id: new Date().getTime(),

Josue Cerron Tuesta

student•

Grande bro!

Jahiker Rojas

student•

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

Carlos Rodríguez

student•

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í

Francisco Ruiz

student•

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>```

Josue Cerron Tuesta

student•

Gracias!

SEG TI

student•

Aquí mi ejemplo de crear un ID a partir del id actual y ultimo de la lista (array).

Jose Ever Muñoz Muñoz

student•

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.

Hans González

student•

Yo tengo problemas al agrearlo, me sale vacio, cuando le hago guardar movimiento :(

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;
    },

<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>```

Agregar y quitar

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?