VueJs filtering by JSON

Question

How can I filter the data to show the name?

I have card filtering by cites

     <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 of no border type. Content of no border type. Content of no border type. Content of no border type.
          </p>
        </Card>
      </div>
    </div>

Here is a JSON

[
 {
  "title": "Mazowieckie",
  "children": [
   {
    "title": "Warszawa",
    "count": 10000

   },
   {
    "title": "Otwock",
    "count": 10600

   }
  ]
 }
]

And i need make a filtering by children.title

I tried by this way:

export default {
components: {
    Header,
    Footer,
    Col,
    Row
},
name: 'Index',
data () {
  return {
      stationCity: '',
      stationCityData,
      stationCitySearch: ''
  }
},
computed: {
  // Filtered by Cites
    filteredCity: function () {
        return this.stationCityData.filter((item) => {
            let childrens = stationCityData.map(function (q) {
                return q.children;
            });

            return item.childrens.match(this.stationCitySearch)
        })
    }
}

}

but did not succeed Is there any way to do this? Filtering cards by children.title. example by "Warszawa"

Answer 1

I know this is old so you might have worked this out. This worked for me:

data(){
   return{
    filterName:'Warszawa'
  }
},
computed:{
   filteredName(){
    return this.titles
    .filter((title)=>{
     return item.title.match(this.filterName);
})

then

<div v-for="item in filteredName"></div>

Granted, for me, I was calling a JSON object from an API but I assume you are doing the same.