フォーカスを持つ入力にVue.JS値を結ぶ

Question

入力がフォーカスを失ったときにモデルの値を変更する方法はありますか？

ここでのユースケースは、入力時の結果を示す検索入力です。これらは、検索ボックスにフォーカスがあるときにのみ表示されます。

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

そして、ここで

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

アイデアは、検索ボックスにフォーカスがあるときにmagic_flagがtrueに向けるべきであるということです。

は、ここで私がこれまで持っているものです。私はこれを手動で（例えばjQueryを使って）行うことができましたが、純粋なVue.JSソリューションが必要です。

Answer 1

明らかに、これはevent handlersで少しのコードを行うのと同じくらい簡単です。

<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

ます。また、検索を有効にする可能性がある場合、ユーザーのマウスを置い入力オーバー - @mouseover = ...

この種の機能に別のアプローチは、フィルタ入力でも、常にアクティブであるということですマウスが結果リストにあるとき。任意の文字を入力すると、フォーカスを変更せずにフィルタ入力が変更されます。多くの実装では、文字または数字が入力された後にのみフィルタ入力ボックスが実際に表示されます。

@ event.captureを参照してください。