vue.js - style - vue router

Valor de Vue.JS vinculado a la entrada que tiene el foco

Question

¿Hay alguna manera de cambiar un valor en el modelo cuando una entrada obtiene / pierde enfoque?

El caso de uso aquí es una entrada de búsqueda que muestra los resultados mientras escribe, estos solo deberían mostrarse cuando el foco está en el cuadro de búsqueda.

Esto es lo que tengo hasta ahora:

<input type="search" v-model="query">
<div class="results-as-you-type" v-if="magic_flag"> ... </div>

Y entonces,

new Vue({
  el: ''#search_wrapper'',
  data: {
    query: '''',
    magic_flag: false
  }
});

La idea aquí es que magic_flag debería convertirse en true cuando el cuadro de búsqueda tenga foco. Podría hacerlo manualmente (usando jQuery, por ejemplo), pero quiero una solución Vue.JS pura.

Answer 1

Aparentemente, esto es tan simple como hacer un poco de código en los controladores de eventos .

<input type="search" v-model="query"
       @focus="magic_flag = true"
       @blur="magic_flag = false">
<div class="results-as-you-type" v-if="magic_flag"> ... </div>

Answer 2

También es posible que desee activar la búsqueda cuando el usuario pasa sobre la entrada - @mouseover = ...

Otro enfoque para este tipo de funcionalidad es que la entrada del filtro siempre está activa, incluso cuando el mouse está en la lista de resultados. Escribir cualquier letra modifica la entrada del filtro sin cambiar el enfoque. Muchas implementaciones realmente muestran el cuadro de entrada del filtro solo después de que se escribe una letra o número.

Mire en @ event.capture.