VueJs通过JSON过滤

Question

如何过滤数据以显示名称？

我有被引证过滤的卡片

     <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>

这是一个JSON

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

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

   }
  ]
 }
]

我需要按children.title进行过滤

我通过这种方式尝试过：

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)
        })
    }
}

}

但是没有成功有没有办法做到这一点？ 按children.title过滤卡片。 以“ Warszawa”为例

Answer 1

我知道这很旧，所以您可能已经解决了。 这为我工作：

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

然后

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

当然，对我而言，我从API调用了JSON对象，但我想您也是如此。