Javascript vue 2滤波器多阵列

对不起，我的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

但这不是工作

请给我一些建议～！

试试这个：

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

---

this.banner

是一个数组，您将其作为

filteredList

中的函数使用，不应该是

this.banner.filter

？返回this.banner.filter（函数（项）{return item.banner\img&&item.banner\img.some（函数（img）{return img.img.img.toLowerCase（）==this.search.toLowerCase（）；}）;@MatJ哦~！谢谢，你能告诉我如何解决这个问题吗？这并不是真正的回答问题，但如果我可以建议你使用一个叫做lodash（）的很棒的库的话。它非常适合对各种类型的数据进行各种操作，还有更多。谢谢您的回复，但是是“TypeError:无法读取未定义的属性'toLowerCase'”我猜图像可能有一些空值。哦，谢谢！这就是工作！对不起，如果我想进行多个搜索，例如：search“img”：“air_1.png”和“id”：3，“img”：“hot_1.png”，返回img.img&&that.search.indexOf（img.img.toLowerCase（））>=0；但是在这种情况下，您必须创建另一个循环以使搜索数组值小写。

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

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