Vue.js如何修复错误:未捕获TypeError: data.filter不是我代码中的函数？
Vue.js如何修复错误:未捕获TypeError: data.filter不是我代码中的函数？
提问于 2019-02-20 03:48:28
我在json中有一个这样的结构：
itens: {"countcats":2,"countsubcats":7,
"catsubcatsdata":{
"15978738e6cd1e":{"title":"Test 1","description":"blablabla",
"subcats":{
"1597873b1653d9": {"codurl":"t01url","title":"Teste subiten 1","description":""},
"1597873bd76c80": {"codurl":"t01url2","title":"Testing sub two","description":""},
"1597873c9d4a81": {"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"},
}},
"15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet",
"subcats":{
"159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},
"159787472eb5e6":{"codurl":"donecorci ","title":"Donec hendrerit orci","description":""},
"15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum", "description":""},
"159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum. Quisque efficitur nec sapien eu ultricies"}
}}
}}我有以下代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
<input type="text" placeholder="Search" v-model="searchQuery">
<ul>
<li v-for="(value, key) in filteredList">
<b>{{ value.title }}</b><br>{{ value.description }}
<ul>
<li v-for="(vsub, keysub) in value.subcats"><a v-bind:href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a></li>
</ul>
</li>
</ul>
</div>
<script>
new Vue({
el: '#v-for-sectors',
data: {
searchQuery: '',
itens: {"catsubcatsdata":{"15978738e6cd1e":{"title":"Test 1","description":"blablabla","subcats":{"1597873b1653d9":{"codurl":"t01url","title":"Teste subiten 1","description":""},"1597873bd76c80":{"codurl":"t01url2","title":"Testing sub two","description":""},"1597873c9d4a81":{"codurl":"t01url3","title":"Test sub 3","description":"blablabla 01"}}},"15978745b32c1b":{"title":"Loren Ipsun","description":"lamet dectoid samet","subcats":{"159787464bc887":{"codurl":"maecenas","title":"Maecenas pulvinar","description":"orci non volutpat varius"},"159787472eb5e6":{"codurl":"donecorci","title":"Donec hendrerit orci","description":""},"15978748b89bca":{"codurl":"massadictum","title":"Nullam eu massa dictum","description":""},"159787495492f4":{"codurl":"ultricies","title":"Etiam massa arcu","description":"Donec ultricies porttitor augue quis dictum."}}}}}
},
computed: {
filteredList: function () {
var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
var data = this.itens.catsubcatsdata
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
return data
}
}
});
</script>
我试着遵循这个例子的逻辑：https://br.vuejs.org/v2/examples/grid-component.html
但我不明白您为什么返回以下错误：data.filter is not a function"
我想搜索所有标题和描述的项目和子项目。
谁能给我解释一下我哪里错了，正确的方法是什么？
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-20 04:14:35
filter是用于数组的方法，data是一个对象。使用Object.keys方法获取对象键，然后再次使用reduce将数组转换为对象。
new Vue({
el: '#v-for-sectors',
data: {
searchQuery: '',
itens: {
"catsubcatsdata": {
"15978738e6cd1e": {
"title": "Test 1",
"description": "blablabla",
"subcats": {
"1597873b1653d9": {
"codurl": "t01url",
"title": "Teste subiten 1",
"description": ""
},
"1597873bd76c80": {
"codurl": "t01url2",
"title": "Testing sub two",
"description": ""
},
"1597873c9d4a81": {
"codurl": "t01url3",
"title": "Test sub 3",
"description": "blablabla 01"
}
}
},
"15978745b32c1b": {
"title": "Loren Ipsun",
"description": "lamet dectoid samet",
"subcats": {
"159787464bc887": {
"codurl": "maecenas",
"title": "Maecenas pulvinar",
"description": "orci non volutpat varius"
},
"159787472eb5e6": {
"codurl": "donecorci",
"title": "Donec hendrerit orci",
"description": ""
},
"15978748b89bca": {
"codurl": "massadictum",
"title": "Nullam eu massa dictum",
"description": ""
},
"159787495492f4": {
"codurl": "ultricies",
"title": "Etiam massa arcu",
"description": "Donec ultricies porttitor augue quis dictum."
}
}
}
}
}
},
computed: {
filteredList: function() {
var filterKey = this.searchQuery &&
this.searchQuery.toLowerCase();
var data = this.itens.catsubcatsdata;
if (!filterKey) {
return data;
}
return Object.keys(this.itens.catsubcatsdata)
.filter(function(key) {
var row = data[key];
return Object.keys(row)
.some(function(key) {
return String(row[key])
.toLowerCase()
.indexOf(filterKey) > -1;
})
})
.reduce(function(acc, key) {
acc[key] = data[key];
return acc;
}, {})
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="v-for-sectors">
<input type="text" placeholder="Search" v-model="searchQuery">
<ul>
<li v-for="(value, key) in filteredList">
<b>{{ value.title }}</b><br>{{ value.description }}
<ul>
<li v-for="(vsub, keysub) in value.subcats">
<a :href="'http://www.teste.com/'+vsub.codurl">{{ vsub.title }} - {{ vsub.description }}</a>
</li>
</ul>
</li>
</ul>
</div>
Stack Overflow用户
发布于 2019-02-20 04:03:51
问题出在这里：
var data = this.itens.catsubcatsdata
if (filterKey) {
data = data.filter(function (row) {catsubcatsdata是一个对象，而不是数组。filter是一个数组方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54773897
复制相关文章
相似问题