Componente del historial

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

Francisco Javier Cervantes Candelario

student•

Lista de movimientos:

movements: [
        {
          id: 1,
          title: "Movimiento",
          description: "Deposito de salario",
          amount: "1000",
        },
        {
          id: 2,
          title: "Movimiento 1",
          description: "Deposito de honorarios",
          amount: "500",
        },
        {
          id: 3,
          title: "Movimiento 3",
          description: "Comida",
          amount: "-100",
        },
        {
          id: 4,
          title: "Movimiento 4",
          description: "Colegiatura",
          amount: "1000",
        },
        {
          id: 5,
          title: "Movimiento 5",
          description: "Reparación equipo",
          amount: "1000",
        },
      ],

Josue Cerron Tuesta

student•

Gracias bro!

Ameth Ordoñez Erazo

student•

Estilos de Movements/Index.vue

<style scoped>
.movements {
  max-height: 100%;
  padding: 0 8px;
  margin-bottom: 14px;
}
.title {
  margin: 8px 16px 24px 16px;
  color: var(--brand-blue);
}
.content {
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: scroll;
}
</style>

Josue Cerron Tuesta

student•

Gracias, heroe!

Jorge Federico Rivera Gallegos

student•

Gracias

Orlando Perez

student•

Los props de los componentes ya son reactivos, si el valor es actualizado (En los componentes que lo envian como parametro) se vera reflejado en todos los componentes que lo reciban (Pero, no pueden ser reasignados en el mismo compoente). Es redundante colocar los props con toRefs solo para usarlos en el template. Y al usar composition API los props declarados estan por defecto disponibles en el template como por ejemplo en el Movement.vue

<template>
	<!-- Aqui igualmente se puede usar title  -->
	<!-- porque vue se encarga de enviar los props al template -->
	<div class="movement">{{ title }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

// No es necesario asignar los props a una variable
// a menos de que se vayan a utilizar en otra funcion
defineProps({
	title: {
		type: String,
	}
});
// Esto tampoco sería necesario
// const { title } = toRefs(props);
</script>

Joshua Martinez

student•

Me gustaría saber el por qué dices que no es necesario el toRefs, entiendo yo que es para que nuestros props sean reactivos y cambien según se haga un cambio en otra parte a la variable que pasamos por ese prop.

saul aranda

student•

Estilos de Movements :

David A. Casas Amézquita

student•

No hagas manualmente los cambios de ID

Les recomiendo esta extención de VSCode para actualizar rapidamente los ids de los objetos de movements solo con un comando

link = Increment Selection

Cesar González Caballero

student•

.movements {

max-height: 100%;

padding: 0 8px;

margin-bottom: 14px;

}

.title {

margin: 8px 16px 24px 16px;

color: var(--brand-blue);

}

.content {

max-height: 68vh;

display: flex;

flex-direction: column;

gap: 8px;

overflow-y: scroll;

}

</style>

Allan Orellana

student•

estoy usando una versión de Vue: 3.2.13, y el linter me arroja un error multi-word-component-names como puedo corregir esto, me podrian ayudar por favor?

Gabriel Rios

student•

agrega "vue/multi-word-component-names": "off" en las rules del archivo .eslintrc.js

Joshua Martinez

student•

Lo que dice el compañero Gabriel, ó también puedes colocar dos nombres al archivo como MovementsLayout.vue

Julian David Alzate Cuervo

student•

¿Qué es reactividad? Reactividad es cuando la vista de la aplicación cambia cuando los valores reactivos dentro de estas cambian su valor

Jose Alejandro Pantoja Giraldo

student•

por ahora vamos piola.

Jaime Eduardo Falla Cardozo

student•

Aún no logro entender bien el tema de ToRefs.

Josue Cerron Tuesta

student•

En la documentación lo explican muy bien.

movements: [
        {
          id: 1,
          title: "Movimiento",
          description: "Deposito de salario",
          amount: "1000",
        },
        {
          id: 2,
          title: "Movimiento 1",
          description: "Deposito de honorarios",
          amount: "500",
        },
        {
          id: 3,
          title: "Movimiento 3",
          description: "Comida",
          amount: "-100",
        },
        {
          id: 4,
          title: "Movimiento 4",
          description: "Colegiatura",
          amount: "1000",
        },
        {
          id: 5,
          title: "Movimiento 5",
          description: "Reparación equipo",
          amount: "1000",
        },
      ],

<style scoped>
.movements {
  max-height: 100%;
  padding: 0 8px;
  margin-bottom: 14px;
}
.title {
  margin: 8px 16px 24px 16px;
  color: var(--brand-blue);
}
.content {
  max-height: 68vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: scroll;
}
</style>

<template>
	<!-- Aqui igualmente se puede usar title  -->
	<!-- porque vue se encarga de enviar los props al template -->
	<div class="movement">{{ title }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

// No es necesario asignar los props a una variable
// a menos de que se vayan a utilizar en otra funcion
defineProps({
	title: {
		type: String,
	}
});
// Esto tampoco sería necesario
// const { title } = toRefs(props);
</script>

Componente del historial

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?