基於輸入的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>