我正在尝试进行自动完成输入,我想过滤结果,它过滤但只过滤它找到的第一个对象,我需要它来查找例如所有以p开头的对象
你能支持我吗
new Vue({
el: '#app',
data: {
value: '',
routes: [
{ id: 1, name: "perfil" },
{ id: 2, name: "perfil2" },
{ id: 3, name: "menu"},
{ id: 4, name: "menu2"}
],
filter: []
},
methods: {
filterResults ( value ) {
const search = this.routes.filter(route => route.name === value);
this.filter = search
console.log(search)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="value" placeholder="Buscar" @input="filterResults(value)"/>
<li v-for="(route, id) in filter" :key="id">{{ route.name }}</li>
</div>
你有问题在
filter()
. 您正在寻找与输入的单词完全匹配的内容。要搜索“以 P 开头”的内容,您可以使用startsWith()
.另一方面,为了使搜索不区分大小写,我将名称与输入的值进行比较,但将两者都设为小写
toLowerCase()
。可以使用match(它返回P包含的所有值),不管是在中间、结尾还是开头还是startsWith