Componente del historial
Contenido del curso
Componente del historial
Contenido del curso
Eduardo Razo Cobián
Josue Cerron Tuesta
Ameth Ordoñez Erazo
Josue Cerron Tuesta
Jorge Federico Rivera Gallegos
Orlando Perez
Joshua Martinez
saul aranda
David A. Casas Amézquita
Cesar González Caballero
Allan Orellana
Gabriel Rios
Joshua Martinez
Julian David Alzate Cuervo
Jose Alejandro Pantoja Giraldo
Jaime Eduardo Falla Cardozo
Josue Cerron Tuesta
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", }, ],
Gracias bro!
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>
Gracias, heroe!
Gracias
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>
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.
Estilos de Movements :
<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>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
<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>
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?
agrega "vue/multi-word-component-names": "off" en las rules del archivo .eslintrc.js
Lo que dice el compañero Gabriel, ó también puedes colocar dos nombres al archivo como MovementsLayout.vue
¿Qué es reactividad? Reactividad es cuando la vista de la aplicación cambia cuando los valores reactivos dentro de estas cambian su valor
por ahora vamos piola.
Aún no logro entender bien el tema de ToRefs.
En la documentación lo explican muy bien.
