我在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"
我想搜索所有标题和描述的项目和子项目。
谁能给我解释一下我哪里错了,正确的方法是什么?
https://stackoverflow.com/questions/54773897
复制相似问题