使用 Laravel ORM hasmany & Vue 2 过滤 Laravel 中的数据

debugcn 发表于 Dev

布鲁斯

对不起，我使用 Laravel ORM 与 Vue 2 有很多关系。

分析json数据有些问题..

Laravel ORM

$banner = Banner::with('banner_img')->get();
return response()->json($banner);

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}]}]

我的 json 数据有两个数组。

我想用 Vue.js 过滤这个 json 数据（banner_img:['img']）。

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.banner_img.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>

然后我尝试return value.banner.banner_img.img，但错了..

请给我一些建议～！谢谢！

泰勒

根据您的 JSON 示例，每个对象在属性上都有一个值数组banner_img。所以value.banner.banner_img.img是不正确的，因为value.banner没有财产banner_img。

试试这个：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。