Vue中computed的使用（附带例子）

一、背景

遇到一个需求：将后端返回的对象数组按照其某个属性进行分类显示，自然就想到了用computed来进行二次数据处理。

二、后端返回的数据格式

{
    "agency_id": "xxx",
    "agency_img": "https:xxx.xxx.xx",
    "agency_name": "xxx",
    "agency_bussiness": "type1"
},
{
    "agency_id": "xxx",
    "agency_img": "https:xxx.xxx.xx",
    "agency_name": "xxx",
    "agency_bussiness": "type2"
},
{
    "agency_id": "xxx",
    "agency_img": "https:xxx.xxx.xx",
    "agency_name": "xxx",
    "agency_bussiness": "type3"
}

分类的依据就是 agency_bussiness 这个属性

三、实现思路及代码

1. initData()函数向后端获取数据，然后对 agencys 变量进行初始化；
2. 在computed中的两个 type1Agency（）、type2Agency（）分别对数组数据进行二次过滤，然后绑定到 template的两个div中被分别遍历。

--template 部分:

<div>
    <div v-if="this.agency_bussiness === 'type1'">
        <agencyCard v-for="item in type1Agency" v-bind="item" :key="item.index"/>
    </div>

    <div v-else-if="this.agency_bussiness === 'type2'">
        <agencyCard v-for="item in type2Agency" v-bind="item" :key="item.index"/>
    </div>
</div>


--script 部分：

data() {
    return {
        agency_bussiness: 'all',
        agencys: []
    };
},

methods: {
    initData() {
        this.getRequest('/agencys').then((res) => {
        this.agencys = res;
        });
    }
},

created() {
    this.initData();
},

computed: {
    type1Agency() {
      return this.agencys.filter((item) => item.agency_bussiness === 'type1');
    },
    type2Agency() {
      return this.agencys.filter((item) => item.agency_bussiness === 'type2');
    },
}