No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Componente del historial

8/21
Recursos

Aportes 8

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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",
        },
      ],

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>

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>

Estilos de Movements :

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

驴Qu茅 es reactividad? Reactividad es cuando la vista de la aplicaci贸n cambia cuando los valores reactivos dentro de estas cambian su valor

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

por ahora vamos piola.

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