Resumen de datos
Contenido del curso
Setup inicial
Vista
Gráfico
Modelo
Cierre
Resumen de datos
Contenido del curso
Resumen de datos
Ameth Ordoñez Erazo
Estudiante
Hans González
Estudiante
Lucas Da Rosa
Estudiante
Cesar González Caballero
Estudiante
Fabricio Orrala
Estudiante
Diana Martinez
Estudiante
Josue Cerron Tuesta
Estudiante
Jaime Eduardo Falla Cardozo
Estudiante
Felix Torres Javier Antonio
Estudiante
Wendy Mejia
EstudianteDiana Martinez
Estudiante
Alexander Flores Rayme
Estudiante
Nathali Anzola
Estudiante
Cesidio Antonio Di Benedetto Carri
Estudiante
Jose Alejandro Pantoja Giraldo
Estudiante
Yefreilee Danny Samuel Parra
EstudianteLuis Cano
Estudiante
Miguel Angel Reyes Moreno
Estudiante
Juan Guillermo Perez Cardozo
Estudiante
Kenneth Leonel Cruz Ordoñez
Estudiante
Eduardo Razo Cobián
Estudiante
Alvaro Eduardo Armijos Sarango
Estudiante
Javier Andrés Moreno Tocarruncho
EstudianteLos estilos del Index.vue del Resume:
<style scoped> main { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } h1, p { margin: 0; text-align: center; } h1 { margin-top: 14px; color: var(--brand-green); } .graphic { display: flex; justify-content: center; align-items: center; width: 100%; padding: 48px 24px; box-sizing: border-box; } </style>
Gracias brother
Mi solución:
<script> export default { props: { label: { type: String, }, amount: { type: Number, default: null, }, totalAmount: { type: Number, }, date: { type: String, }, }, computed: { amountVisual() { return this.amount !== null ? this.amount : this.totalAmount; }, labelVisual() { if (this.amount == null) { return this.label; } return this.date; }, }, }; </script>
<style scoped>
main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
h1,
p {
margin: 0;
text-align: center;
}
h1 {
margin-top: 14px;
color: var(--brand-green);
}
.graphic {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 48px 24px;
box-sizing: border-box;
}
</style>
Se puede usar Composition API en un archivo y Options API en otro?
Claro que si
Se puede usar ambos en un mismo archivo también. Pero se recomienda usar uno en el proyecto.
Este es mi proyecto
Agregalo a GitHub Pages
Tengo problemas con eslint que me manda a borrar espacios vacios, me gustaria poder usarlo para evitar errores, pero no a un nivel tan tedioso, como se le puede configurar que solo marque verdaderos errores?
Puedes aprovechar el comando de eslint + --fix, para que corrija los errores fáciles de resolver automáticamente, o puedes crear y editar el archivo de configuración de eslint y meter toda la configuración a tu gusto, eso lo encuentras en la documentación de eslint. https://eslint.org/docs/latest/use/configure/
<template> <main class="resume"> <p> {{ label }} </p> <h2> {{ amountVisual }} </h2> </main></template> <script setup>import { computed } from "vue"; const { amount, label, totalAmount } = defineProps({ amount: Number, totalAmount: Number, label: String,}); const amountVisual = computed(() => { return amount !== null ? amount : totalAmount;});</script>
Hola!! les comparto mi solución<template> <main> <p>{{ labelVisual }}</p> <h2>{{ amountVisual }}</h2> </main></template> <script>export default { props: { label: { type: String, required: true }, date: { type: String, default: null }, amount: { type: Number, default: null }, totalAmount: { type: Number }, }, computed: { amountVisual() { return this.amount !== null ? this.amount : this.totalAmount; }, labelVisual() { return this.date || this.label; }, },}; </script>```js <template>
<main> <p>{{ labelVisual }}</p> <h2>{{ amountVisual }}</h2> </main> </template> <script> export default { props: { label: { type: String, required: true }, date: { type: String, default: null }, amount: { type: Number, default: null }, totalAmount: { type: Number }, }, computed: { amountVisual() { return this.amount !== null ? this.amount : this.totalAmount; }, labelVisual() { return this.date || this.label; }, }, }; </script>Para hacerlo un poco mas real, cree una arreglo que tiene fechas y montos y cree una propiedad computada que devuelve el total del arreglo.
Dejo el arreglo por si alguien mas lo quiere usar
const data = [ { date: "1/8/2024", amount: 20823.79, }, { date: "1/24/2024", amount: 3152.06, }, { date: "2/26/2023", amount: 4430.17, }, { date: "7/21/2023", amount: 15369.65, }, { date: "9/24/2023", amount: 6618.09, }, { date: "2/7/2023", amount: 5312.18, }, { date: "3/11/2023", amount: 9195.41, }, { date: "11/28/2023", amount: 17559.02, }, { date: "5/22/2023", amount: 20117.18, }, { date: "1/16/2024", amount: 13961.1, }, { date: "11/26/2023", amount: 3652.74, }, { date: "8/13/2023", amount: 18187.65, }, { date: "10/28/2023", amount: 6987.19, }, { date: "1/12/2024", amount: 3119.4, }, { date: "11/21/2023", amount: 7542.17, }, { date: "3/12/2023", amount: 17814.23, }, { date: "9/12/2023", amount: 12095.57, }, { date: "4/27/2023", amount: 4641.93, }, { date: "3/3/2023", amount: 12634.8, }, { date: "9/29/2023", amount: 17143.73, }, { date: "10/12/2023", amount: 1522.53, }, { date: "5/6/2023", amount: 13567.38, }, { date: "1/4/2024", amount: 2977.87, }, { date: "3/18/2023", amount: 7131.69, }, { date: "11/21/2023", amount: 11780.8, }, { date: "1/18/2024", amount: 11815.86, }, { date: "11/26/2023", amount: 22926.26, }, { date: "9/2/2023", amount: 7594.23, }, { date: "10/11/2023", amount: 4630.2, }, { date: "3/13/2023", amount: 20781.3, }, { date: "6/6/2023", amount: 11390.69, }, { date: "4/13/2023", amount: 16338.37, }, { date: "2/28/2023", amount: 17881.87, }, { date: "10/11/2023", amount: 2331.36, }, { date: "6/15/2023", amount: 11103.48, }, { date: "11/9/2023", amount: 2599.09, }, { date: "1/28/2023", amount: 23738.82, }, { date: "6/19/2023", amount: 8021.65, }, { date: "3/12/2023", amount: 5604.67, }, { date: "3/8/2023", amount: 21311.96, }, { date: "2/2/2023", amount: 1816.74, }, { date: "12/23/2023", amount: 5404.06, }, { date: "11/28/2023", amount: 7744.4, }, { date: "4/25/2023", amount: 10608.9, }, { date: "4/17/2023", amount: 21815.45, }, { date: "7/5/2023", amount: 11746.43, }, { date: "7/19/2023", amount: 19824.12, }, { date: "8/22/2023", amount: 19977.67, }, { date: "11/5/2023", amount: 7344.03, }, { date: "2/17/2023", amount: 13347.68, }, { date: "10/9/2023", amount: 4904.94, }, { date: "6/17/2023", amount: 11664.09, }, { date: "10/17/2023", amount: 12247.04, }, { date: "5/10/2023", amount: 14293.81, }, { date: "7/25/2023", amount: 7425.03, }, { date: "6/27/2023", amount: 4129.25, }, { date: "7/15/2023", amount: 16421.45, }, { date: "10/23/2023", amount: 21738.46, }, { date: "7/6/2023", amount: 5455.79, }, { date: "10/11/2023", amount: 17494.79, }, { date: "5/12/2023", amount: 24565.4, }, { date: "6/17/2023", amount: 22787.62, }, { date: "12/18/2023", amount: 6659.55, }, { date: "4/11/2023", amount: 10978.4, }, { date: "7/14/2023", amount: 23773.24, }, { date: "4/14/2023", amount: 8688.24, }, { date: "3/20/2023", amount: 11118.29, }, { date: "2/24/2023", amount: 19238.98, }, { date: "9/4/2023", amount: 15077.51, }, { date: "9/9/2023", amount: 9251.18, }, { date: "12/27/2023", amount: 9307.45, }, { date: "10/17/2023", amount: 5121.13, }, { date: "10/30/2023", amount: 15649.65, }, { date: "8/11/2023", amount: 11574.35, }, { date: "11/5/2023", amount: 21995.88, }, { date: "1/30/2023", amount: 14133.58, }, { date: "7/21/2023", amount: 17170.08, }, { date: "4/5/2023", amount: 13438.48, }, { date: "11/3/2023", amount: 3522.37, }, { date: "8/3/2023", amount: 17210.06, }, { date: "8/31/2023", amount: 12097.81, }, { date: "5/7/2023", amount: 18118.22, }, { date: "3/15/2023", amount: 9370.82, }, { date: "8/29/2023", amount: 13671.87, }, { date: "1/22/2024", amount: 2526.03, }, { date: "11/16/2023", amount: 13959.17, }, { date: "7/18/2023", amount: 13273.48, }, { date: "9/24/2023", amount: 19931.42, }, { date: "10/21/2023", amount: 8111.76, }, { date: "12/30/2023", amount: 23845.41, }, { date: "9/9/2023", amount: 5140.1, }, { date: "4/13/2023", amount: 10185.53, }, { date: "5/27/2023", amount: 10980.17, }, { date: "12/20/2023", amount: 13038.14, }, { date: "7/12/2023", amount: 23479.35, }, { date: "6/28/2023", amount: 5058.69, }, { date: "4/2/2023", amount: 23941.86, }, { date: "2/8/2023", amount: 16924.1, }, { date: "5/14/2023", amount: 4597.63, }, { date: "11/12/2023", amount: 13485.06, },];
export default data;
Mi solucion:
labelVisual() { return this.amount !== null ? "2023-02-22" : this.label; },
En el amount en Home, le coloque como parametro :amount="null" y me funciono perfectamente, lo que me gustaria saber si es correcto que lo haga asi, o si por lo contrario deberia hacerle una variable y returnar el valor de null? Saludos!
Si puedes asignar directamente null al prop de tu componente :amount=“null”, pero es mejor pasarle una variable :amount=“amount” ya que luego puedes poner un watcher al prop si quieres "escuchar" un cambio en el componente padre.
Esto hice para una fecha:
Index.vue:
<template> <main> <p>{{ selectedDate }}</p> <h2>{{ amountVisual }}</h2> </main> </template> <script> export default { props: { label: { type: String, required: true, }, dateLabel: { type: String, default: null, }, totalAmount: { type: Number, required: true, }, amount: { type: Number, default: null, }, }, computed: { amountVisual() { return this.amount !== null ? this.amount : this.totalAmount; }, selectedDate() { return this.dateLabel !== null ? this.dateLabel : this.label; }, }, }; </script> <style scoped> main { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } h1, p { margin: 0; text-align: center; } h1 { margin-top: 14px; color: var(--brand-green); } .graphic { display: flex; justify-content: center; align-items: center; width: 100%; padding: 48px 24px; box-sizing: border-box; } </style>
Home.vue:
<template> <Layout> <template #header> <Header></Header> </template> <template #resume> <Resume :label="'Ahorro total'" :totalAmount="50000" :amount="amount" :dateLabel="dateLabel" /> </template> <template #movements> <Movements /> </template> </Layout> </template> <script> import Header from "./Header.vue"; import Layout from "./Layout.vue"; import Movements from "./Movements.vue"; import Resume from "./Resume/Index.vue"; export default { components: { Header, Layout, Movements, Resume, }, data() { return { amount: null, dateLabel: "22/10/2022", }; }, }; </script>
me parece una buena forma de lograr el reto
Index.vue
//se agrega función computada y se utiliza dicha función en el template labelVisual(){ const timestamp = (new Date).toLocaleString('en-US'); const label = 'Ahorro total'; return this.label !== null ? label : `${label}: ${timestamp}`; },
//En la función data, se agrega la variable 'label' y se envía como parametro de 'label' en el template `Resume` data(){ return { amount: null, label: null, }
Mi solución al reto:
Home.vue
<template> <Layout> <template #header> <Header /> </template> <template #resume> <Resume :label="'Ahorro total'" :date="date" :amount="amount" :total-amount="200000" /> </template> <template #movements> <Movements /> </template> </Layout> </template> <script> import Layout from "./Layout.vue"; import Header from "./Header.vue"; import Resume from "./Resume/Index.vue"; import Movements from "./Movements.vue"; export default { components: { Layout, Header, Resume, Movements, }, data() { return { amount: 100, date: "26 de noviembre del 2022", }; }, }; </script> <style></style>
Index.vue
<template> <main> <p v-text="labelShow"></p> <h1 v-text="amountShow"></h2> </main> </template> <script> export default { props: { label: { type: String, }, date: { type: String, default: null, }, amount: { type: Number, default: null, }, totalAmount: { type: Number, }, }, computed: { amountShow() { return this.amount !== null ? this.amount : this.totalAmount; }, labelShow() { return this.date == null ? this.label : this.date; }, }, data() { return {}; }, }; </script> <style scoped> main { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100vh; } h1, p { margin: 0; text-align: center; } h1 { margin-top: 14px; color: var(--brand-green); } </style>
Así me quedo la parte del reto:
Home.vue:
<template> <Layout> <template #header> <Header /> </template> <template #resume> <Resume :label="label" :date="'06 de Abril 2022'" :total-amount="100000" :amount="amount" /> </template> <template #movements> <Movements /> </template> </Layout> </template> <script> import Layout from "./Layout.vue"; import Header from "./Header.vue"; import Resume from "./Resume/Index.vue"; import Movements from "./Movements.vue"; export default { components: { Layout, Header, Resume, Movements, }, data() { return { amount: null, label: null, }; }, }; </script>
Index.vue:
<template> <main> <p>{{ labelVisual }}</p> <h2>{{ amountVisual }}</h2> </main> </template> <script> export default { props: { label: { type: String, default: null, }, date: { type: String, }, totalAmount: { type: Number, }, amount: { type: Number, default: null, }, }, computed: { amountVisual() { return this.amount !== null ? this.amount : this.totalAmount; }, labelVisual() { return this.label !== null ? this.label : this.date; }, }, }; </script> <style scoped> main { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } h1, p { margin: 0; text-align: center; } h1 { margin-top: 14px; color: var(--brand-green); } .graphic { display: flex; justify-content: center; align-items: center; width: 100%; padding: 48px 24px; box-sizing: border-box; } </style>
Va, realicé el reto de esta forma. Cualquier mejora que me sugieran será bienvenida. 😁
El template Home
<template> <Layout> <template #header> <Header /> </template> <template #resume> <Resume :label="'Ahorro total'" :specific-date="specificDate" :total-amount="100000" :specific-amount="specificAmount" /> </template> <template #movements> <Movements /> </template> </Layout> </template> <style></style> <script> import Layout from "./LayoutItem.vue"; import Header from "./HeaderItem.vue"; import Resume from "./Resume/IndexResume.vue"; import Movements from "./Movements/IndexMovements.vue"; export default { components: { Layout, Header, Resume, Movements, }, data() { return { specificAmount: null, specificDate: null, }; }, }; </script>
El template Resume
<template> <main> <p>{{ labelInfo }}</p> <h2>{{ amountToShow }}</h2> </main> </template> <script> export default { props: { label: { type: String, }, totalAmount: { type: Number, }, specificAmount: { type: Number, default: null, }, specificDate: { type: String, default: null, }, }, computed: { amountToShow() { return this.specificAmount !== null ? this.specificAmount : this.totalAmount; }, labelInfo() { return this.label !== null ? this.label : this.labelInfo; }, }, }; </script> <style scoped> main { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; } h1, p { margin: 0; text-align: center; } h1 { margin-top: 14px; color: var(--brand-green); } .graphic { display: flex; justify-content: center; align-items: center; width: 100%; padding: 48px 24px; box-sizing: border-box; } </style>