How can I display only the names in the data?
I currently have cards filtered by cities
<div v-for="item in stationCityData">
<div v-for="option in filteredCity" style="background:#eee;padding: 20px">
<!-- <div v-for="option in item.children" style="background:#eee;padding: 20px"> -->
<Card :bordered="false">
<p slot="title">
{{ option.title }}
</p>
<p>
Content without a border. Content without a border. Content without a border. Content without a border.
</p>
</Card>
</div>
</div>
Here is the JSON data:
[
{
"title": "Mazowieckie",
"children": [
{
"title": "Warszawa",
"count": 10000
},
{
"title": "Otwock",
"count": 10600
}
]
}
]
And I need to filter by children's titles
I attempted it this way:
export default {
components: {
Header,
Footer,
Col,
Row
},
name: 'Index',
data () {
return {
stationCity: '',
stationCityData,
stationCitySearch: ''
}
},
computed: {
// Filtered by Cities
filteredCity: function () {
return this.stationCityData.filter((item) => {
let childrens = stationCityData.map(function (q) {
return q.children;
});
return item.childrens.match(this.stationCitySearch)
})
}
}
}
However, I was unsuccessful in my attempts. Is there an alternative approach for filtering cards by children's titles, like filtering by "Warszawa"?