Otra forma de trabajar con esos props, que a mi en lo personal me gusta más es pasar todo el objeto como prop, y dentro del componente movement en este caso usar la notación de punto para acceder a la propiedad.
Introducción
Construye una aplicación para el control de tus gastos con Vue.js
Creación del proyecto
Setup inicial
Splashscreen
Header y contenido
Layout
Vista
Resumen de datos
Agregando formato a la moneda
Componente del historial
Lista del historial
El botón para agregar
Formulario para agregar
Gráfico
Creación del SVG del gráfico
Creación de las coordenadas en el gráfico
Creación de la lógica del gráfico
Creando la interacción con el gráfico
Modelo
Modelo de datos
Agregar y quitar
Persistencia del modelo
Últimos detalles de nuestra aplicación
Cierre
Poniendo nuestra aplicación en producción en Netlify
¿Quieres más cursos de Vue?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 12
Preguntas 2
Otra forma de trabajar con esos props, que a mi en lo personal me gusta más es pasar todo el objeto como prop, y dentro del componente movement en este caso usar la notación de punto para acceder a la propiedad.
Estilo de Movements
<style scoped>
.movement {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 16px;
background-color: #e6f9ff;
border-radius: 8px;
box-sizing: border-box;
}
.movement .content {
width: 100%;
}
.movement .action {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-direction: column;
}
h4,
p {
margin: 0;
padding: 0;
}
h4 {
margin-bottom: 8px;
}
.movement .action img {
margin-bottom: 16px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
Si quieren separar la función para formatear la moneda, yo lo hice así.
Cree el archivo: “src/js/currencyFormater.js”
const currencyFormater = new Intl.NumberFormat("es-CO", {
style: "currency",
currency: "COP",
});
export default currencyFormater;
Y en los componentes dónde necesite usarlo, lo importo:
import currencyFormater from "@/js/currencyFormater";
Ver el video, tomar notas y después realizar todo sin mirar, es el mejor desafío que se pueden plantear.
Buenas.
Para cambiar el color dependiendo si el monto es mayor o menor a 0, lo hice de la siguiente forma:
<template>
...
<p :class="amountStatus" >{{ amountCurrency }}</p>
...
</template>
<script setup>
import {computed} from 'vue';
const amountStatus = computed(()=>{
return amount.value > 0 ? 'green' : 'red';
});
</script>
Espero les sirva o si hay alguna observación se los agradeceré jaja. Saludos.
si no les carga la imagen de la papelera pueden usar
../../assets/trash-icon.svg
Les comparto alguna de las cosas que hice disitnto que creo le da mejor lectura al código
cuando usamos el componente Movement
podemos usar la propiedad v-bind
para enviar todos los elementos del objeto movement
que sacamos del v-for
Es igual a la desestructuración de objetos de JS
<MovementDetail
v-for="movement in movements"
:key="movement.id"
v-bind="{ ...movement }"
@remove="remove"
/>
En la clase del elemento encargado de renderizar el amount, usar un terniario en lugar de un objeto
<p :class="[isExpense ? 'red' : 'green]'">{{ amountFormatted }}</p>
Resume en composition API:
<script setup>
import { toRefs, defineProps, computed } from "vue";
const currencyFormatter = new Intl.NumberFormat("es-MX", {
style: "currency",
currency: "MXN",
});
const props = defineProps({
label: {
type: String,
required: true,
},
dateLabel: {
type: String,
default: null,
},
totalAmount: {
type: Number,
required: true,
},
amount: {
type: Number,
default: null,
},
});
const { label, dateLabel, totalAmount, amount } = toRefs(props);
const amountVisual = computed(() =>
amount.value !== null ? amount.value : totalAmount.value
);
const selectedDate = computed(() =>
dateLabel.value !== null ? dateLabel.value : label.value
);
const amountCurrency = computed(() =>
currencyFormatter.format(amountVisual.value)
);
</script>
Cabe resaltar que para unsar la notación de punto deltro del setup, en este caso hay que anteponer el props… por ejemplo props.movement.amount
Comparto mi repositorio en el commit actual si quieren ver los estilos con el preprocesador sass
.
Mi repositorio, commit actual: Click aquí
Tengo entendido que Composition API es más moderno, fácil de utilizar, más poderoso y es lo recomendable con proyectos con Vue 3 en adelante.
A mí solo me funcionó llamando a la función :p
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?