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對象，但我想您也是如此。