Resumen de datos
Clase 6 de 21 • Curso Práctico de Vue.js
Contenido del curso
Ameth Ordoñez Erazo
student•
hace 4 años
Hans González
student•
hace 3 años
Ameth Ordoñez Erazo
Hans González
Lucas Da Rosa
Fabricio Orrala
Diana Martinez
Josue Cerron Tuesta
Jaime Eduardo Falla Cardozo
Felix Torres Javier Antonio
Cesar González Caballero
Wendy Mejia
Diana Martinez
Alexander Flores Rayme
Nathali Anzola
Cesidio Antonio Di Benedetto Carri
Jose Alejandro Pantoja Giraldo
Yefreilee Danny Samuel Parra
Luis Cano
Miguel Angel Reyes Moreno
Juan Guillermo Perez Cardozo
Kenneth Leonel Cruz Ordoñez
Francisco Javier Cervantes Candelario
Alvaro Eduardo Armijos Sarango
Javier Andrés Moreno Tocarruncho
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>
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>
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
<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>
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>