Filtros y Directivas en Vue.js para Mejorar UI de Tablas

Pana el hecho de que te tomes el tiempo para responder las dudas de los estudiantes, dejar links a artìculos para complementar la enseñanza sobre las dudas que respondes y demás deja muy bien parado éste curso;
Lo voy a recomendar mucho, hasta ahora muy completo!
Saludos!

Compañeros, si están usando la versión 3 de Vue tendrán problemas al usar filter ya que este fue removido de esta versión.
Por lo tanto no funcionará que en el archivo main.js usen la función ’filter’ ya que esta dejo de ser soportada.

Pero a pesar de eso, aún podemos tener los mismos resultados que se muestran en esta clase.
Eso sí, hay algunas cosas que se hacen diferentes.

–> Veamos paso a paso lo que hay que hacer <–
PRIMERO
> Ya no haremos uso del archivo main.js, por lo que este archivo no hay que modificarlo. Se deja tal como lo tenían.
SEGUNDO
> Tal como se muestra en esta clase deben crear el archivo filters.js en su directorio ’src’ y agregarle el mismo contenido que pone el profesor.
Incluso usando la librería numeral que descargaron al comienzo de la clase por ‘npm’.
TERCERO
> Ahora estando en el archivo PxAssetsTable.vue veremos varias diferencias, ya que es aquí donde simulamos el mismo efecto que tenía la función filter de la versión 2.x de Vue.

> Comencemos viendo como queda la sección <script> de nuestro archivo:
- PxAssetsTable.vue -

> Si observan es aquí donde hacemos la importación de nuestras funciones que creamos en el archivo filters.js.
> Ahora para acceder a estas funciones debemos usar, dentro de nuestro bloque ‘export default’, la función setup().
Usando setup() retornaremos las funciones que importamos de nuestro archivo filters.js.
Solo así podremos hacer uso de estas funciones, nuestros “filtros”, dentro de nuestra sección <template>.

> Por lo que veamos ahora como podemos aplicar estás funciones de filters.js en los datos de nuestra tabla.
Vayamos a la sección <template> de nuestro archivo:
- PxAssetsTable.vue -

> Para la columna ’Precio’ y ’Cap. de Mercado’, al igual que en la clase, le aplicamos la función dollarFilter().
> Y para nuestra columan ‘Variación 24hs’ le aplicamos la función percentFilter().
> Es de esta forma entonces como usamos nuestras funciones de nuestro archivo ‘filters.js’.
Hacemos un simple llamado de la función y le pasamos el parametro que espera. <

------------------------

Y bueno, a pesar de ya no poder usar la función ‘filter’, de esta forma podemos tener los mismos resultados que vimos en esta clase.
Espero les sirva 😄, saludos a todos!!

Dos cosas me sorprenden de este curso:

1. Vue es muy intuitivo. Seguramente el laburo del día a día incremente su complejidad pero los fundamentos son fáciles de comprender e iterar sobre ellos.
2. Nacho explica muy bien y está pendiente de los estudiantes. Veo muchos comentarios suyos aportando más valor 👏👏👏

LOS FILTROS EN VUE 3 YA NO EXISTEN

Según su documentación oficial los filtros dentro de VueJS dejaron de existir, en su lugar reecomiendan usar propiedades computadas o métodos.

Aquí les dejo el código para que puedan simular el uso de filtros siguiendo la documentación de Vue, el archivo main.js ya no se toca, ahí ya no hacemos nada, pero en el componente PxAssetsTable.vue hay que agregar importar dollarFilter y hay que agregar el método, que en este caso lo llame dollar para simular el filtro de la clase, el cual va a devolver lo que la función dollarFilter devuelva:

import { dollarFilter } from "@/filters";

export default {
  name: "PxAssetsTable",

  props: {
    assets: {
      type: Array,
      default: () => []
    }
  },

  methods: {

    dollar(value) {
      return dollarFilter(value);
    }

  }

};

Y simplemente en el template lo usamos como un método normal:

<td>{{ dollar(a.priceUsd) }}</td>

Nacho hasta esta clase caigo en cuenta lo bien estructurado que está este curso. Felicidades.

Primero dar una pasada por los componentes básicos y luego ir agregando casos reales con un proyecto productivo te va llevando mucho más rápido por los conceptos que necesitas en el día a día.

Cada vez amo más vue.js XD

Los filtros los estuve buscando una vez para mi trabajo y nunca entendi como implementarlos, ahora veo todo con claridad, muchas gracias!!!

Otra manera de evaluar el valor para dar color al porcentaje sería verificando si el número es mayor o menor a 0.

<td :class="asset.changePercent24Hr > 0 ? 'text-green-600' : 'text-red-600'">
	{{ asset.changePercent24Hr | percent }}
</td>

Otra manera de hacer la validación del color:

        <td
          :class="
            parseFloat(a.changePercent24Hr) < 0.0
              ? 'text-red-600'
              : 'text-green-600'
          "
        >
          {{ a.changePercent24Hr | percent }}
        </td>

la equivalencia más cercana que puedo ubicar, son los pipes para Angular… 🤔

Si como yo están en Vue 3 los códigos son los siguientes:

filter.js

import numeral from 'numeral'

const filters  =  {
  DollarFilter: value =>   
    value ? numeral(value).format('($ 0.00a)') : '$ 0'
}

export default filters 

en main.js se declara así:

import  { createApp } from "vue";
import filters from "@/filters";

const app = createApp(App).use(router)
app.config.globalProperties.$filters = filters
app.mount("#app");

y se declara en el td así:

	<td>
          {{ $filters.DollarFilter(a.priceUsd) }}
        </td>

Si alguno de ustedes está haciendo el curso con Vue 3, la funcionalidad de filters ha sido removida.

Si quieren saber cómo manejar esta funcionalidad en esta versión podría revisar el siguiente link

El sitio web de NumeralJS: http://numeraljs.com/

Hola pueden escribir sus filtors también con ternarios para hacerlos un poco menos verbosos

//filters.js
import numeral from 'numeral'

const dollarFilter = function(value) {
   return value ? numeral(value).format('($ 0.00a') : '$ 0'
}

const percentFilter = function(value) {
   return value ? `${Number(value).toFixed(2)}%` : '0%'
}

export { dollarFilter, percentFilter } 

Otra forma podria ser asi despues de todo lo que hemos visto. 😃

<td :class="a.changePercent24Hr < 0 ? 'text-red-600' : 'text-green-600'">

Curioso ver aqui el precio del BTC en los 8k… actualmente 55K … caramba hombre, q negocio me perdi xD

HOY BTC 59K

Una forma más moderna de escribir filters.js:

import numeral from "numeral";

const dollarFilter = (value) => {
  return !value ? "$ 0" : numeral(value).format("($ 0.00a)");
};

const percentFilter = (value) => {
  return !value ? "0%" : `${Number(value).toFixed(2)}%`;
};

export { dollarFilter, percentFilter };

ejemplo seria como un pipe si fuese Angular ¿?

Si estas usando Vue3:
In 3.x, filters are removed and no longer supported. Instead, we recommend replacing them with method calls or computed properties.

Esto de los filtros es muy parecido a los pipes de Angular, sin embargo los de Vue me gustan más!

Vue.js le permite definir filtros que pueden usarse para aplicar formato de texto común. Se puede utilizar filtros en dos lugares: interpolaciones mustache y expresiones v-bind. Los filtros se deben agregar al final de la expresión de JavaScript, denotados por símbolo “pipe”:

<!-- en mustaches -->
{{ message | capitalize }}

<!-- en v-bind -->
<div v-bind:id="rawId | formatId"></div>

main.js

import { createApp } from “vue”;
import App from “./App.vue”;
import “@/assets/css/tailwind.css”;
import router from “@/router.js”;
import { dollarFilter } from “@/filters.js”

const app = createApp(App)
.use(router)

app.config.globalProperties.$filters = {
dollarFilter
}

app.mount("#app");

PxAssetsTable

{{ $filters.dollarFilter(asset.priceUsd) }}

Este es el unico cambio para que quede de maneta global

La funcionalidad de los filters ha quedado deprecada. El equipo de Vue.js recomienda usar metodos o propiedades computadas para el uso de los mismos.
.
https://v3.vuejs.org/guide/migration/filters.html#overview

Que mágico:)

Por si a alguien no le funciona la librería, pueden hacerlo de esta forma, no es lo idea, y no tiene que ver con el tema, pero soluciona el problema:

para los dos primeros:

            <td>$ {{ Math.round(a.priceUsd * 100) / 100 }}</td>
            <td>$ {{ Math.round(a.marketCapUsd * 100) / 100 }}</td>

para el ultimo valor:

        methods: {
            percentFilter(value){
                if (!value) {
                    return 0;
                }
                return `${Number(value).toFixed(2)}%`
            }
        }

<td :class="a.changePercent24Hr.includes('-') ? 'text-red-600' : 'text-green-500'">
                {{ percentFilter(a.changePercent24Hr) }}
</td>

Podemos exportar directamente al crear la función

import numeral from "numeral"

export const dollarFilter = (value) => {
    if(!value) return "$ 0"
    return numeral(value).format(("$ 0.00a"))
}

export const percentFilter = (value) => {
    if(!value) return "0%"
    return `${Number(value).toFixed(2)}%`
}

Este es el doc de vue 2 donde se explica los filtros https://vuejs.org/v2/guide/filters.html

Támbien Podemos usar Intl.NumberFormat de JavaScript.

<td>{{ new Intl.NumberFormat("es-CO").format(a.priceUsd) }}</td>

1. instalar libreria-> npm i -S numeral
2. crear filter.js

import numeral from 'numeral'

const dollarFilter = function(value) {
  if (!value) {
    return '$ 0'
  }

  return numeral(value).format('($ 0.00a)')
}

const percentFilter = function(value) {
  if (!value) {
    return '0%'
  }

  return `${Number(value).toFixed(2)}%`
}

export { dollarFilter, percentFilter }

3.en main js

import { dollarFilter, percentFilter } from '@/filters'

Vue.filter('dollar', dollarFilter)
Vue.filter('percent', percentFilter)

4.hacer uso en PxAssetsTable.vue

<td>{{ a.priceUsd | dollar }}</td>
        <td>{{ a.marketCapUsd | dollar }}</td>

{{ a.changePercent24Hr | percent }}

con los filtros mi valor incial se manteniene igual

no entendi muy bien por que pones export defauld y tampoco por que cuando importas al archivo main.js en el import lo pones con llaves {dollarFilter}

<v-content>
  <router-view/>
</v-content>

Filtros:

Utilidad de Vue.js que nos permite modificar el valor de la vista de una propiedad sin modificar el valor de la propiedad.
Permite formatear algún valor para mostrar en la interfaz de usuario.

una pregunta por que la funcion que retornaba la API la exportabas con export default y al filtro con export? cual es la diferencia?

casi dormido

export default {
  name: "PxAssetsTable",
  methods:{
    getClassName(value)
    {
      let className = "";
      
      if(value > 0)
      {
        className = "text-success";
      }
      else if (value < 0)
      {
        className = "text-danger";
      } 
      else
      {
        className = "text-dark";
      }

      return className;
    }
  },
  props: {
    assets: {
      type: Array,
      default: () => []
    }
  }
};

la magia de prettier

Filtros: Son una utilidad que nos da Vue con la que podemos modificar el valor de una vista de una propiedad sin modificar el valor de la propiedad, es decir, dentro de la aplicación el valor de la propiedad no va a cambiar pero al momento de mostrarse en pantalla va a tener una adaptación a ese valor según el formato que se le quiera dar.

Estoy haciendo este curso en marzo del 2021, los resultados que arroja el Cap. de mercado a esta fecha en el bitcoin se ha multiplicado enormemente! Los invito a tomar los cursos de trading, no tienen desperdicio!

y pensar que ahora el bitcoin esta en 51k 😐

La función includes me pareció bastante interesante !!

👌

Wow. La forma de programar en Vue es muy intuitiva. Estoy chocando un poco porque ya mi mente está demasiado adaptada a React, pero me ha parecido fascinante este framework ❤️

Me llama la atencion que al final se haya decidido utilizar includes() para identificar si le numero es negativo, tratandolo como string.
Segun veo changePercent24Hr es numerico y es posible solo checar si es mayor que cero para determinar el color:

<td :class="c.changePercent24Hr > 0 ? 'text-green-600' : 'text-red-600'">
          {{c.changePercent24Hr | percent}}
        </td>