vue 2 filter multiple array

Question

不好意思，我的json數據有兩個數組。

我想用Vue.js過濾這個json數據（banner_img：['img']）。

但分析JSON數據的一些問題..

JSON數據

[{"id":10,"banner":"AIR","banner_img":[{"id":1,"img":"air_1.png","banner_id":10},{"id":2,"img":"air_2.png","banner_id":10}]}, 
{"id":11,"banner":"HOT","banner_img":[{"id":3,"img":"hot_1.png","banner_id":11},{"id":4,"img":"hot_2.png","banner_id":11}]}, 
{"id":12,"banner":"NEW","banner_img":[{"id":5,"img":"new_1.png","banner_id":12},{"id":6,"img":"new_2.png","banner_id":12}]}] 

Vue.js

var app = new Vue({ 
el: '#app', 
data: { 
    banner:[], 
    search:'', 
}, 
methods: { 
    getBannerData: function() { 
     axios.get('/case/ajax/33').then(response => { 
      this.banner = response.data.banner; 
     }); 
    }, 
}, 
mounted: function() { 
    this.getBannerData(); 
}, 
computed: { 
    filteredList() { 
     return this.banner(value => { 
     return value.banner_img.filter(bannerImg => { 
     return bannerImg.img.toLowerCase().includes(this.search.toLowerCase()); 
     }); 
     }) 
    } 
} 
}); 

HTML

<input type="text" name="ImgFilter" v-model="search"> 
<div v-for="value in filteredList"> 
    <img v-for="imgs in value.banner_img" :src="imgs.img" height="100"> 
</div> 

那我試試這個filteredList

return value.banner_img.filter(bannerImg => { 
     return bannerImg.img.toLowerCase().includes(this.search.toLowerCase()); 
}); 

但不會工作。

請給我一些建議〜

Answer 1

試試這個：

filterList:function()(
    var that = this; 
    return this.banner.filter(function(item) { 
      return item.banner_img && item.banner_img.some(function(img) {   
       return img.img && img.img.toLowerCase() === that.search.toLowerCase();   
      }); 
     }); 
    )