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 Daniel 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?