No tienes acceso a esta clase

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

Lista del historial

9/21
Recursos

Aportes 11

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

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: 鈥渟rc/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";

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>

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.

Les comparto alguna de las cosas que hice disitnto que creo le da mejor lectura al c贸digo

  1. 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" 
    />
    
  2. 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>
    

Ver el video, tomar notas y despu茅s realizar todo sin mirar, es el mejor desaf铆o que se pueden plantear.

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