Filtros en Vue: conversión milisegundos a minutos

Los filtros permiten formatear datos en la vista sin alterar su valor real: claridad para el usuario y precisión en el código. Aquí verás cómo crear e instalar un filtro global que convierte milisegundos a minutos, y cómo aplicarlo con el pipe en expresiones para mostrar duraciones de canciones correctamente.

¿Qué son los filtros y por qué importan?

Los filtros sirven para mostrar un valor formateado sin modificar la propiedad original. Por ejemplo, un número 1 puede verse como “pesos 1” en pantalla mientras el dato interno sigue siendo 1. Esto es clave cuando el código necesita números para calcular, pero la interfaz requiere strings con símbolos o separadores.

• Separan lógica de presentación del dato real.
• Se usan en expresiones y se encadenan con el | pipe.
• Se pueden instalar global o local según el uso.
• La función del filtro debe devolver el valor formateado.

Apunte útil: en versiones antiguas de view había filtros nativos; hoy se trabaja más con expresiones, pero crear filtros personalizados sigue siendo simple.

¿Cómo crear e instalar el filtro global ms2mm?

Crearemos una carpeta /source/filters y el archivo ms2mm.js. Definimos un objeto con install para registrar el filtro de forma global usando view.filter. La función interna recibirá el valor original y retornará el formateado.

Habilidades y keywords que aplicas: - Crear un plugin con función install para instalación global. - Usar una función arrow que recibe el valor original y retorna el formateado. - Convertir tiempo con Math.floor, operador % y toFixed. - Construir la salida con template strings.

// /source/filters/ms2mm.js
function convertMsToMm(ms) {
  const minutes = Math.floor(ms / 60000);
  const sec = ((ms % 60000) / 1000).toFixed(0);
  return `${minutes}:${sec}`; // template string de ES6/2015.
}

const ms2mm = {
  install(view) {
    view.filter('ms2mm', (val) => convertMsToMm(val));
  }
};

export default ms2mm; // export default del objeto filtro.

Ahora lo instalamos de forma global en main.js con use:

// main.js
import ms2mm from '@/filters/ms2mm';
view.use(ms2mm); // similar a cómo se usa el *bus* o el *router*.

Notas prácticas: - Si tu editor marca “variables no usadas”, es un error de estilo que se corrige al integrarlas. - Mantén nombres claros: filtro “ms2mm” y función “convertMsToMm”.

¿Cómo aplicarlo en componentes con pipe y expresiones?

Una vez instalado globalmente, puedes usarlo en cualquier componente. Busca la propiedad que contiene la duración en milisegundos (por ejemplo, duration_ms en track.view o en el componente del player) y aplica el pipe.

• En plantillas, los filtros se usan siempre dentro de expresiones.
• Se aplican con la barra vertical: |.
• El dato original permanece intacto en el estado: solo cambias la representación en pantalla.

<!-- Track (track.view) -->
<span>{{ duration_ms | ms2mm }}</span>

<!-- Player -->
<span>{{ currentTrack.duration_ms | ms2mm }}</span>

Qué observar al probar en el navegador: - La duración se muestra como “minutos:segundos”. - Al inspeccionar el elemento, el valor original sigue en milisegundos. - El filtro se aplica en todos los componentes por estar instalado global.

Habilidades reforzadas: - Aplicar filtros en expresiones con pipe. - Formatear datos para UI sin mutar el estado. - Reuso del filtro en múltiples componentes.

¿Tienes una variación o mejora para este formato de tiempo? Comparte tu idea en los comentarios y cuéntanos cómo lo aplicarías en tu proyecto.