Vue modifiers: cómo simplificar eventos

Extiende la funcionalidad nativa de Vue con modifiers para eventos y logra interacciones más fluidas. Verás cómo activar la búsqueda al presionar Enter en lugar de depender del botón, reduciendo código y errores, y aprovechando la directiva v-on (también con @). Ya se venía trabajando con un plugin para un event bus; ahora el foco está en eventos y su sintaxis clara con modifiers.

Qué son los modifiers en Vue

Los modifiers son atributos que se agregan a directivas para modificar su comportamiento. Se usan mucho con eventos y también pueden aplicarse en otras directivas y en filtros. La idea: expresar una intención (por ejemplo, “solo cuando se presiona Enter”) sin escribir lógica imperativa para inspeccionar el evento o comparar teclas.

¿Cómo extienden las directivas sin código extra?

• Se escriben con notación de punto: ejemplo: @keyup.enter.
• Operan sobre eventos como keyup, click y submit.
• Evitan leer el objeto de evento y su keyCode manualmente.
• Hacen el código más declarativo y fácil de mantener.

Mejora la búsqueda con @keyup.enter

En el archivo search.vue, se agrega un evento al input de la barra de navegación para que la búsqueda se dispare al presionar Enter. Con v-on (o @) se maneja cualquier tipo de evento con una sola directiva y una sintaxis uniforme.

¿Cómo escuchar solo Enter en el input?

<!-- search.vue -->
<input
  type="text"
  v-model="searchQuery"
  @keyup.enter="search"
/>

• Alternativa equivalente: v-on:keyup.enter="search".
• Importante: no bindear la propiedad searchQuery como si fuera método. Invocar el método search.
• El evento corre cuando se suelta Enter y el input tiene foco.

¿Por qué evita código imperativo?

• No hace falta inspeccionar el evento ni su tecla presionada.
• Se elimina lógica condicional repetitiva.
• La intención queda explícita: “ejecuta search al presionar Enter”.

Otros modifiers mencionados para eventos

Además de Enter, se menciona el uso de escape, y modifiers útiles en click y submit para realizar prevent default del comportamiento nativo. También se pueden usar en otras directivas y filtros, manteniendo la coherencia de la sintaxis.

¿Cuándo usar escape, click o submit?

• escape: capturar la tecla Escape cuando se necesita esa interacción.
• click y submit: hacer prevent default para evitar navegación o recarga.

Ejemplos de patrón:

<!-- Evitar el comportamiento nativo -->
<button @click.prevent>Buscar</button>
<form @submit.prevent>
  <!-- campos -->
</form>

¿Tienes más casos donde los modifiers simplifican tus eventos? Comparte tus ejemplos y dudas en los comentarios.