Persistencia del modelo
Contenido del curso
Persistencia del modelo
Contenido del curso
lucas cartisano
La parte que borra los datos del formulario (minuto 8:00, aprox), no sería mejor implementarla dentro de la funcion que guarda los datos? y luego de comprobar que los datos se guarden? porque en caso de que el evento o la funcion tengan algun error y fallen, nos va a parecer que se guardo cuando no se hizo, y se van a perder los datos
Diana Martinez
También es posible, aquí el punto es dar un ejemplo, pero por supuesto que se puede mejorar. :3
Diego Valdez Acosta
Si están usando la sintaxis de <script setup> deben usar la función onMounted importandola desde 'vue'. Quedaría algo así:
import { computed, onMounted, ref } from "vue"; ... ... ... onMounted(() => { const movementsFromLocalStorage = localStorage.getItem("movements"); if (movementsFromLocalStorage) { movements.value = JSON.parse(movementsFromLocalStorage)?.map( (movement: any) => ({ ...movement, time: new Date(movement.time), }) ); } });
Alexander Silvera
Seria bueno que den un ejemplo de como consumir los datos de una api o como conectar con una base de datos externas.
Carlos Rodríguez
Debes hacer primero la trilogía de cursos del profesor JuanDC, sobre el consumo de API's, aquí los enlaces: . Curso de Consumo de API REST con JavaScript Curso Práctico de Consumo de API REST con JavaScript Curso Profesional de Consumo de API REST con JavaScript
Josue Cerron Tuesta
Hay cursos en platzi que puedes tomar
Eduardo Torres
Me gusta usar el doble || (pipe) para asignar un valor por default en caso de que no se obtenga nada del localstorage.
mounted() { const movements = JSON.parse(localStorage.getItem("movements")) || []; this.movements = movements.map((m) => ({ ...m, time: new Date(m.time) })); },
Xiomar Serna
Martin Mendez
el problema de la grafica se debe al largo del array de amounts que toma al principio. Debería ser ===> amounts.value.length - 1 Luego en const x modifical la multiplicada quitarle el "* i + 1"
Les dejo el codigo abajo.
OJO que yo tengo 330 de largo en Pixeles en la clase creo fue siempre de 300 ! ! ! !
const points = computed(() => { const total = amounts.value.length - 1; return amounts.value.reduce((points, amount, i) => { // 330 is the total pixel width const x = (330 / total) * i; console.log(total, i); const y = amountToPixels(amount); console.log("x , y ==> ", x, y); return `${points} ${x},${y}`; },""); });
Si quieren solucionar el monto negativo que no se dibujaba correctamente en el gráfico al final del video, solo deben corregir la función amounts() del Home.vue:
amounts() { const lastDays = this.movements.filter((x) => { const today = new Date(); const oldDate = today.setDate(today.getDate() - 30); return x.time > oldDate; }) .map((y) => y.amount); return lastDays.map((x, i) => { const lastMovements = lastDays.slice(0, i); return ( x + lastMovements.reduce((suma, movement) => { return suma + movement; }, 0) ); }); },
Esta sección calcula la suma de los movimientos anteriores:
lastMovements.reduce((suma, movement) => { return suma + movement; }, 0)
Pero estaba faltando sumar el movimiento actual (x):
return ( x + lastMovements.reduce((suma, movement) => { return suma + movement; }, 0) );
