vue 2 filter multiple array

Question

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

this.banner is an array, you are using it like a function inside filteredList, shouldn't that be this.banner.filter? — Mat J
– Mat J, Commented Aug 30, 2017 at 5:05
return this.banner.filter(function(item) { return item.banner_img && item.banner_img.some(function(img) { return img.img.toLowerCase() === this.search.toLowerCase(); }); }); — Rakib
– Rakib, Commented Aug 30, 2017 at 5:09
this is not really answering a question, but if I may suggest to you to use a wonderful library called lodash (lodash.com). It is great for doing various operations with all sorts type of data and much more — Duy Anh
– Duy Anh, Commented Aug 30, 2017 at 7:26

Rakib · Accepted Answer · 2017-08-30 05:39:26Z

1

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

edited Aug 30, 2017 at 5:39

answered Aug 30, 2017 at 5:16

Rakib

6437 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bruce Over a year ago

thank your reply, but is "TypeError: Cannot read property 'toLowerCase' of undefined"

Rakib Over a year ago

I guess then there might be some null values for image.

Bruce Over a year ago

oh thank you! is work! Excuse me,If I want to multiple search ,ex: search "img":"air_1.png” and "id":3,"img":"hot_1.png",

Rakib Over a year ago

return img.img && that.search.indexOf(img.img.toLowerCase())>=0;

Rakib Over a year ago

But in this case you will have to create another loop to make lowercase the search array values.

Collectives™ on Stack Overflow

vue 2 filter multiple array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related