这样的效果怎么实现

Question

点击上面的状态分类可以筛选下面的数据

后台返回的每条数据都有一个status状态码

data(){
    ReceivingList: [
        {status:1},
        {status:2},
        {status:3},
        {status:4}
    ],
}

怎么搞。。。

Answer 1

用计算属性，循环orders渲染

{
 data: () => ({
   ReceivingList: [],
   status: 0, // 0 -全部，1-...
 }),
 computed: {
   orders() {
     const {status: s, ReceivingList: list} = this;
     return s == 0 ? list : list.filter(v => v.status == s)
   }
 }
}

话说这个应该是有分页吧，服务端应该要支持不同类型的请求才对，然后切换时前端再去重新请求接口传对应类型

Answer 2

使用Filter过滤一下，或者一开始就遍历一下然后push到数组里，直接使用即可。

vue中，楼上的计算属性就挺好