基于输入的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>