Lista del historial

Clase 9 de 21 • Curso Práctico de Vue.js

Guillermo Castaño Vèlez

student•

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.

Ameth Ordoñez Erazo

student•

En este caso te tocaria hacer el v-for dentro del componente Movements.vue. Ambas soluciones están bien, solo cambia la forma de administrar los componentes.

Josue Cerron Tuesta

student•

Esa es la forma correcta de hacerlo. Usar el toRefs() es innecesario. Solo se usa toRefs() cuando se va a desestructurar el prop.

Jefferson Serrano

student•

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>

Josue Cerron Tuesta

student•

Eres un héroe!

Jorge Federico Rivera Gallegos

student•

Muchas gracias

Andrés Felipe Perdomo Alvarado

student•

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";

Juan Guillermo Perez Cardozo

student•

excelente, de acuerdo contigo asi nuestra aplicacion esta mejor organizada

Josue Cerron Tuesta

student•

Excelente bro!

Jose Alejandro Pantoja Giraldo

student•

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

Marcos Vargas Mayta

student•

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.

Julian David Alzate Cuervo

student•

si no les carga la imagen de la papelera pueden usar

../../assets/trash-icon.svg

David A. Casas Amézquita

student•

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>
```

David A. Casas Amézquita

student•

update: incluso pueden evitar desestructura movements ya que en si es un objeto 😅

Miguel Angel Reyes Moreno

student•

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>

Cesar González Caballero

student•

.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>

Sam Leonetti

student•

¿Qué significa desestructurar un prop?

Diana Martinez

student•

Destructurar no es un concepto de Vue, sino de JavaScript, y se refiere a cuando extraes valores de un objeto, usando la sintaxis de llaves para obtener variables independientes, así:

const obj = { foo: 'bar' }; // Así creas un objeto

// Normalmente accederías así al valor de 'foo'
obj.foo // Esto de daría 'bar' como salida

// Pero puedes destructurar 'foo' para sacarlo de 'obj' y usarlo de forma independiente, así:
const { foo } = obj; // Así destructuras foo

// Y ya solo usas 'foo' como variables
foo // Esto daría 'bar' como salida

Diana Martinez

student•

Entonces destructurar un prop, se refiere a recibir los props del componente, como un objeto, y luego extraer los valores a variables independientes.

Francisco Javier Cervantes Candelario

student•

¿Hay forma de reutilizar esa función de formato para moneda?

¿Será bueno usarla en un mixin?

David Ikingari Solórzano Villalón

student•

En parte pensé en hacer eso de formatear las cantidades como una función global, pero cuando tomé el curso de composition API, se mencionó que no es recomendable, en nuevas versiones, el uso de mixins, así que ahora que lo mencionas, me puse a reflexionar, y también me entró la duda. Encontré esta documentación oficial y está bastante claro que ahora podemos crear algunas mini funciones o micro librerías para reutilizarlas en diferentes partes. Además con la estructura de setup, es muy sencillo, similar al JS puro.

https://vuejs.org/guide/reusability/composables.htm

David Ikingari Solórzano Villalón

student•

Esta sería la manera de usarlo con composition API y script setup.

En el template en lugar de mandar "amount" mandarías "montoFinal"

<script setup>
import { toRefs, defineProps, computed, ref } from "vue";
import { formatCurrency } from "../composables/Moneda";

const props = defineProps({
 id: {
  tipe: Number,
 },
 title: {
  type: String,
 },
 description: {
  type: String,
 },
 amount: {
  type: Number,
 }

});

const borrar = () => {
 console.log(id.value);
}
const { id, title, description, amount } = toRefs(props);
const monto = ref(amount.value);
const montoFinal = computed(() => {
 return formatCurrency(monto.value);
});

Guillermo Castaño Vèlez

student•

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

Josue Cerron Tuesta

student•

Así es bro. Eso mantiene la reactividad. Cuando quieres desestructurar el props, ahi se pierde la reactividad, por eso se usa toRefs().

Carlos Rodríguez

student•

Comparto mi repositorio en el commit actual si quieren ver los estilos con el preprocesador sass . Mi repositorio, commit actual: Click aquí

Miguel Angel Reyes Moreno

student•

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.

José Daniel Calle Briceño

student•

A mí solo me funcionó llamando a la función :p

Eden Gomez Gress

student•

Puede ser que "isNegative" lo tengas declarado como una funcion y no como un computed, revisalo.