Resumen de datos
Contenido del curso
Resumen de datos
Contenido del curso
Los 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>
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>
Cesar González Caballero
<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>
Fabricio Orrala
Se puede usar Composition API en un archivo y Options API en otro?
Diana Martinez
Claro que si
Josue Cerron Tuesta
Se puede usar ambos en un mismo archivo también. Pero se recomienda usar uno en el proyecto.
Jaime Eduardo Falla Cardozo
Este es mi proyecto
Felix Torres Javier Antonio
Agregalo a GitHub Pages
Seba Cardoso
Gracias
Wendy Mejia
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?
Diana Martinez
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/
Alexander Flores Rayme
<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>
Nathali Anzola
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>
Cesidio Antonio Di Benedetto Carri
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;
Jose Alejandro Pantoja Giraldo
Mi solucion:
labelVisual() { return this.amount !== null ? "2023-02-22" : this.label; },
Yefreilee Danny Samuel Parra
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!
Luis Cano
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.
Miguel Angel Reyes Moreno
Juan Guillermo Perez Cardozo
me parece una buena forma de lograr el reto
Kenneth Leonel Cruz Ordoñez
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, }
Eduardo Razo Cobián
Alvaro Eduardo Armijos Sarango
Javier Andrés Moreno Tocarruncho
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>
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>
