Resumen de datos

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

Ameth Ordoñez Erazo

student•

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>

Hans González

student•

Gracias brother

Lucas Da Rosa

student•

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>

Fabricio Orrala

student•

Se puede usar Composition API en un archivo y Options API en otro?

Diana Martinez

student•

Claro que si

Josue Cerron Tuesta

student•

Se puede usar ambos en un mismo archivo también. Pero se recomienda usar uno en el proyecto.

Jaime Eduardo Falla Cardozo

student•

Este es mi proyecto

Felix Torres Javier Antonio

student•

Agregalo a GitHub Pages

Cesar González Caballero

student•

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>

Wendy Mejia

student•

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

student•

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

student•

<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

student•

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

student•

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

student•

Mi solucion:

labelVisual() {
      return this.amount !== null ? "2023-02-22" : this.label;
    },

Yefreilee Danny Samuel Parra

student•

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

student•

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

student•

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>

Juan Guillermo Perez Cardozo

student•

me parece una buena forma de lograr el reto

Kenneth Leonel Cruz Ordoñez

student•

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

Francisco Javier Cervantes Candelario

student•

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>

Alvaro Eduardo Armijos Sarango

student•

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>

Javier Andrés Moreno Tocarruncho

student•

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>

Resumen de datos

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?