我在向从 Ajax 调用获得的文本框输入内容时尝试过滤列表。问题似乎是在 Ajax 准备好之前应用了过滤器。
HTML:
<input type="text" class="form-control" v-model="searchTerm">
<table>
<tr v-for="food in filteredItems">
<td>{{ food.name }}</td>
<td>{{ food.energy }}</td>
</tr>
</table>
helpers/index.js:
export default {
getFoods() {
return Vue.http.get('http://localhost:3000/foods/allfoods')
.then((response) => {
return response.data;
});
}
}
Vue 组件:
import helpers from '../helpers'
export default {
name: 'Search',
mounted() {
helpers.getFoods().then((response) => {
this.foodData = response;
});
},
data() {
return {
searchTerm: '',
foodData: [],
}
},
computed: {
filteredItems() {
return this.foodData.filter(function(food){return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase())>=0;});
}
}
当我加载页面或开始输入时,我得到
'TypeError: undefined is not an object (evaluating 'this.searchTerm')'.
如果我对 foodData 数组进行硬编码,一切都会完美无缺。
我是否误解了什么和/或我做错了什么?
最佳答案
在计算的过滤器函数的回调中,this
没有指向 Vue。
computed: {
filteredItems() {
return this.foodData.filter(function(food){
// in this next line, this.searchTerm is likely undefined
// because "this" is not the Vue
return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) >= 0;
});
}
}
这是因为您使用 function(food){...}
作为回调,而 this
将是包含范围。相反,请使用箭头函数、闭包或 bind
。
computed: {
filteredItems() {
return this.foodData.filter(food => {
// in this next line, this.searchTerm is likely undefined
// because "this" is not the Vue
return food.name.toLowerCase().indexOf(this.searchTerm.toLowerCase()) >= 0;
});
}
}
console.clear()
const foods = [{
name: "orange",
energy: 10
},
{
name: "apple",
energy: 8
},
{
name: "banana",
energy: 12
},
{
energy: 1000
}
]
const Search = {
name: 'Search',
template: `
<div>
<input type="text" class="form-control" v-model="searchTerm">
<table>
<tr v-for="food in filteredItems">
<td>{{ food.name }}</td>
<td>{{ food.energy }}</td>
</tr>
</table>
</div>
`,
mounted() {
setTimeout(() => this.foodData = foods, 500)
},
data() {
return {
searchTerm: '',
foodData: [],
}
},
computed: {
filteredItems() {
const searchTerm = this.searchTerm.toLowerCase()
return this.foodData
.filter(food => food.name && food.name.toLowerCase().includes(searchTerm))
}
}
}
new Vue({
el:"#app",
components: {Search}
})
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
<search></search>
</div>
关于javascript - Vue 在输入时搜索 Ajax 响应数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45213269/