我在vue模板中有一个表,搜索不起作用,不知道我错过了什么。
<input type="text" class="dv-header-input" v-model="query.search_input"
@keyup.enter="fetchRecords()">
表格:
<tr v-for="row in filteredRow">
<td v-for="(value, key) in row">{{value}}</td>
</tr>
和JS:
export default {
props: [
'source',
'title',
],
data() {
return {
model: { data: [] },
columns: {},
query: {
search_input: ''
},
}
},
created() {
this.fetchRecords()
},
methods: {
fetchRecords() {
var vm = this
// Not original API,
axios.get(/get/Details)
.then(function(response) {
Vue.set(vm.$data, 'model', response.data.model)
Vue.set(vm.$data, 'columns', response.data.columns)
})
.catch(function(response) {
console.log(response)
})
}
},
computed: {
filteredRow: function(){
return this.model.data.filter((row) => {
for(var key in row){
return String(row[key]).indexOf(this.query.search_input);
}
});
}
}
}
在filteredRow
,我console.log(String(row[key]).indexOf(this.query.search_input))'
给了我30 times 0
。
我缺少什么,最好的方法是什么。
答案 0 :(得分:1)
for循环永远不会超过行中的第一个键。只有在找到字符串时才想返回true
:
filteredRow: function(){
return this.model.data.filter((row) => {
for(var key in row){
if(String(row[key]).indexOf(this.query.search_input) !== -1){
return true;
}
}
return false;
});
}