vue.js - Vue.js 如何修复错误:Uncaught TypeError: data.filter is not a function in my code?
问题描述
我以这种方式在 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
但我不明白您为什么返回以下错误数据。 过滤器不是函数”
我想对项目和子项目的所有标题和描述进行搜索。
有人可以向我解释我错在哪里以及正确的方法吗?
解决方案
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>
推荐阅读
- python - 将鼠标悬停在饼图中的楔形上时可以显示标签
- jquery - 按重要性、权重和长度对查询进行排序
- php - Braintree 付款 - 沙盒交易的处理器拒绝(2409)错误
- karate - 如何在空手道中使用 FileUtils?
- twitter-bootstrap-3 - 如何在菜单项或页脚项之间制作垂直线?
- javascript - 将 3 个流与 Observable 串联和并联组合
- android - 在浏览器中加载离子项目时提示错误“localhost:8100 says gap_init:3”消息
- flutter - 在颤动中拆分文件时访问BuildContext
- python - 查找文件名并将其替换为 C 标准
- python - 在 compareApi 之后获取图像并将数据以匹配的名称存储在数据库中