Componente del historial
Contenido del curso
Componente del historial
Contenido del curso
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", }, ],
Ameth Ordoñez Erazo
Josue Cerron Tuesta
Gracias, heroe!
Jorge Federico Rivera Gallegos
Gracias
Orlando Perez
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
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.
David A. Casas Amézquita
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
<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>
Allan Orellana
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
agrega "vue/multi-word-component-names": "off" en las rules del archivo .eslintrc.js
Joshua Martinez
Lo que dice el compañero Gabriel, ó también puedes colocar dos nombres al archivo como MovementsLayout.vue
Julian David Alzate Cuervo
¿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
por ahora vamos piola.
Jaime Eduardo Falla Cardozo
Aún no logro entender bien el tema de ToRefs.
Josue Cerron Tuesta
En la documentación lo explican muy bien.
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>
