v-modelとバインドされた入力値を設定します。

Question

vue.jsとmaterializecssに基づいて独自の自動補完機能を作成しています。今、それはいくつかのことを除いて、大丈夫働いて

https://jsfiddle.net/guanzo/kykubquh/5/

。

オートコンプリートの通常の動作は、enterキーを押してアイテムを選択するかクリックすると、入力値が選択したアイテムになります。したがって、「アラブ」を入力して「アラバマ」という項目を選択すると、入力値が「アラバマ」になり、ドロップダウンリストが消えます。

問題は、入力がv-model="query"にバインドされていることです。入力の値が入力の値である「クエリ」の値であることを意味します。

this.$el.querySelector('input').value = "Alabama"で入力値を変更しようとしても何も起こりません。私の現在の回避策は、クエリの値を選択状態の値に設定することです。

onSelect(state){ 
    this.selected = state; 
    this.query = state.name//replace input val 
} 

本の厄介な副作用はqueryの値を変更する項目「アラバマ」と再表示するドロップダウンを引き起こす別の検索をトリガすることです。

v-modelでバインドされた入力値を変更するにはどうすればよいですか？

ユーザーがドロップダウンを非表示にする項目を選択した後に、this.onBlurInput();を呼び出すことを試みました。ただし、外からクリックして再度入力すると、明示的に入力を再フォーカスするまで、ドロップダウンは表示されなくなります。

Answer 1

フォーカスとブラーイベントを削除し、queryMatchesに次の行を追加します。正確に一致するものがない場合は、実際にはオプションを表示するだけです。ここで

queryMatches(){ 
    if(this.query.length <= 1){ 
     return []; 
    } 

    // check to see if the current value is already in the list 
    if (this.query === this.selected.name) return []; 

    console.log(this.query) 
    var reg = new RegExp(this.query,'gi') 
    var matches = this.states.filter(state=>{ 
     return reg.test(state.name) 
    }) 
    console.log(matches) 
    return matches 
} 

が更新fiddleです。