CODEWITHSUNDEEP
javascriptjsonvuejs2
Bruce
Bruce

Reputation: 181

vue 2 filter multiple array

Excuse me, my json data have two array.

I want to filter this json data(banner_img:['img']) with Vue.js.

But Analysis Json data is some problems..

Json data

[{"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>

Then I try this filteredList

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

but is not work..

Please give me some advices～！

Upvotes: 1

Views: 2092

Answers (1)

Rakib
Rakib

Reputation: 643

Try this one:

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

Upvotes: 1

Related Questions