基本上,此代码负责将 sortedCars
数组中包含的汽车名称列表显示到下拉列表中。 (该数组按字符串 asc 排序)。
现在,我添加了一个输入文本,并且我正在尝试自动过滤与输入的名称值匹配的汽车列表。
使用以下代码,UI 永远不会更新。哪里错了?
<template>
<div class="btn-group pull-left">
<input type="text" @keyup="onFilterCars" v-model="searchCarTextValue" />
<a v-for="car in this.sortedCars" :key="car.name" @click="onSelectCategoryFilterLabel" class="dropdown-item" href="#">
<span v-else>{{ car.name }}</span>
</a>
</div>
</template>
<script>
export default {
data() {
return {
inputFilterText: "",
mapFilteringEnabled: false,
searchCarTextValue: ""
};
},
props: {
cars: {
type: Array
}
},
computed: {
sortedCars: function() {
function compare(a, b) {
if (a.name < b.name)
return -1;
if (a.name > b.name)
return 1;
return 0;
}
var sortedArr = this.cars.sort(compare);
return sortedArr;
}
},
methods: {
onFilterCars() {
if (this.searchCarTextValue) {
var arrayFiltered = this.sortedCars.filter( (car) => {
return car.name.toLowerCase().indexOf(this.searchCarTextValue.toLowerCase()) != -1
});
this.sortedCars = arrayFiltered;
}
}
}
};
</script>
最佳答案
在vue中很容易过滤,通常我采取这样的方法:
<template>
<div>
<div" class="btn-group pull-left">
<input type="text" v-model="filters.searchCarTextValue" />
</div">
</div>
</template>
<script>
export default {
{
data(){
return {
filters:{
searchCarTextValue: ''
}
}
},
props: {
cars: {
type: Array
}
},
computed: {
// returns list of cars based of filters
filtered_cars(){
let vm = this;
if(!vm.filters.searchCarTextValue){
return [];
}
return vm.sortedCars.filter(car => {
return car.name.toLowerCase().indexOf(vm.filters.searchCarTextValue.toLowerCase()) != -1
})
},
sortedCars: function() {
function compare(a, b) {
if (a.name < b.name)
return -1;
if (a.name > b.name)
return 1;
return 0;
}
var sortedArr = this.cars.sort(compare);
return sortedArr;
}
}
}
</script>
这样就不需要使用方法来过滤,因为只要 filters.searchCarTextValue
或 sortedCars
发生变化,计算值就会发生变化。因此您也不需要按钮来触发过滤。
关于javascript - VueJS : Filter array of objects when user search for something,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59409729/