入力に基づくVueJSフィルタ配列

Question

私はvuejsアプリケーションを持っており、フォームからの入力に基づいて配列をフィルタリングしようとしています。

問題は私の配列ですautocompleteは、最初の名前のクエリと一致する訪問者が入力されていません。

マイHTML

<input class="input" placeholder="First Name" v-model="visitor.first" @keyup.enter="searchVisitors"> 

マイVueのインスタンス

new Vue({ 

    el: '#app', 

    data: { 
    previousVisitors: [], 
    autocomplete: [], 
    visitor: {} 
    }, 

    mounted() { 
    axios.get('/visitors/all').then(response => this.previousVisitors = response.data); 
    }, 

    methods: { 

    searchVisitors(){ 
     var q = this.visitor.first; 
     this.autocomplete = this.previousVisitors.filter(item => {return item.firstName === q}); 
     console.log(this.autocomplete); 
    } 
    } 
}); 

私は現在previousVisitors配列を移入されaxiosからrepsonseを確認することができますが、それぞれ前回の訪問者のfirstName含まれています。

私は間違っていますか？

Answer 1

v-modelはvisitor.firstに設定されていますが、firstNameに基づいてフィルタリングしています。

v-model="visitor.firstName"を使用するようにコードを変更してください。

後で問題を引き起こす可能性のあるその他の問題があります。まず、visitorに値を動的に追加しています。それはchange detection caveatに該当し、その値は反応しません。その値を初期化する必要があります。

data: { 
    ... 
    visitor:{firstName: ''} 
} 

また、フィルターに実際に計算値を使用する必要があります。ここに完全な例があります。

console.clear() 
 

 
const visitors = [{ 
 
    firstName: "bob" 
 
    }, 
 
    { 
 
    firstName: "mary" 
 
    }, 
 
    { 
 
    firstName: "susan" 
 
    }, 
 
    { 
 
    firstName: "Phillip" 
 
    }, 
 

 
] 
 

 

 
new Vue({ 
 

 
    el: '#app', 
 

 
    data: { 
 
    previousVisitors: [], 
 
    visitor: { 
 
     firstName: '' 
 
    } 
 
    }, 
 

 
    mounted() { 
 
    // axios.get('/visitors/all').then(response => this.previousVisitors = response.data); 
 
    setTimeout(() => this.previousVisitors = visitors) 
 
    }, 
 
    computed: { 
 
    autocomplete() { 
 
     return this.previousVisitors.filter(v => v.firstName === this.visitor.firstName) 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"> 
 
    <input class="input" placeholder="First Name" v-model="visitor.firstName"> {{autocomplete}} 
 
</div>