Eduardo Razo Cobián
EstudianteJosue Cerron Tuesta
EstudianteAmeth Ordoñez Erazo
EstudianteJosue Cerron Tuesta
EstudianteJorge Federico Rivera Gallegos
EstudianteOrlando Perez
EstudianteJoshua Martinez
Estudiantesaul aranda
EstudianteDavid A. Casas Amézquita
EstudianteCesar González Caballero
EstudianteAllan Orellana
EstudianteGabriel Rios
EstudianteJoshua Martinez
EstudianteJulian David Alzate Cuervo
EstudianteJose Alejandro Pantoja Giraldo
EstudianteJaime Eduardo Falla Cardozo
EstudianteJosue Cerron Tuesta
EstudianteLista 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.