在我的页面中,有一个列表,这些元素是根据存储在组件中的局部变量构建的。我添加了用于搜索的输入文本,以便能够过滤和显示仅名称中包含用户搜索的字符串的元素。
使用以下代码,我的列表上再也看不到任何刷新。我的错误在哪里?
模板
<input v-model="searchTextValue" v-on:keyup="onSearch" type="text" />
<div v-for="car in localCars" :key="car.id">
<span>{{ car.name }}</span>
</div>
JS
export default {
data() {
return {
localCars: [{name: "audi"}, {name:"fiat"}],
searchTextValue : ""
};
},
methods: {
onSearch() {
this.localCars.filter(function (car) {
return car.name.indexOf(this.searchTextValue) !== -1;
});
},
}
}
答案 0 :(得分:2)
您的代码应如下所示:-
演示Here
<template>
<div>
<input v-model="searchTerm" type="text">
<div></div>
<div v-for="car in filterByTerm" :key="car.id">
<span>{{ car.name }}</span>
</div>
</div>
</template>
<script>
export default {
name: "filter-demo",
data() {
return {
localCars: [{ name: "audi" }, { name: "fiat" }],
searchTerm: ""
};
},
computed: {
filterByTerm() {
return this.localCars.filter(car => {
return car.name.toLowerCase().includes(this.searchTerm);
});
}
},
methods: {}
};
</script>