鍍金池/ 問答/HTML/ vue獲取的數(shù)據(jù)怎么做分開處理？

vue獲取的數(shù)據(jù)怎么做分開處理？

問題：

  1. 我從后端接口獲取到數(shù)據(jù)，怎么根據(jù)獲取的數(shù)據(jù)進(jìn)行分類；
    代碼如下：
data: [
    {
    id: 1,
    play_type: '001',// 玩法
    order_status: 1, // 0,待支付; 1,支付成功,待出票; 2,出票成功,待開始; 3,出票失敗,待退款, 4,已退款, 
    show_status: 1,  // 顯示狀態(tài); 0,不顯示（用戶刪除）, 1,顯示
    },
    {
    id: 2,
    play_type: '003', // 玩法
    order_status: 4,
    show_status: 1,
    },{
    id: 3,
    play_type: '002', 
    order_status: 2,  
    show_status: 0,
    }
]

我需要依據(jù) play_type 單獨(dú)分類， order_status 單獨(dú)分類；
就比如我拿出 play_type 為一樣的數(shù)據(jù)組成數(shù)組；
最后根據(jù) show_status 來判斷是否顯示。

回答
編輯回答
絯孑氣

通過vue的計(jì)算屬性computed和過濾器filter;

computed:{
    // 玩法1
    playType1(){
    // 這里this.data初始化要是空數(shù)組
     return this.data.filter(v => v.play_type === '001');
    }
    // 玩法2 3 類似。 付：可定義一個palyType的數(shù)組 寫個方法簡化代碼
    
    // order_status 與玩法類似
    orderStatus1(){
        return this.data.filter(v => v.order_status === 1);
    }
},
filters:{
    showStatus(val){
        return val.filter(v => v.show_status === 1);
    }
}

整體是這樣，不過不知道你需要怎么展示

如果是在store里分配 直接在請求 獲取數(shù)據(jù)后 把數(shù)據(jù)分好，state里存下你分好的數(shù)據(jù)

const state = {
    // 初始化 data 這里用一個對象把獲取到的原始data和你需要分配的數(shù)據(jù)包起來
    data：{
        orgData：[], // 原始數(shù)據(jù)
        playType1:[], // 玩法
        //2,3,4.....
        orderStatus1:[] // 狀態(tài)
        // 2,3,4....
    }
};

const actions = {
    // action的方法
    async getData(store){
        try{
            const res = await fn(), // 你的請求方法 res是返回的數(shù)據(jù)
               orgData= res;
               playTypeData1 = orgData.filter(v => v.play_type === '001'),
               orderStatusData1 = orgData.filter(v => v.show_status === 1);
               // 然后 用 commit 或dispatch 保存到state里面
        }catch(e){
        }
    }
}

全局 注冊 一個過濾器

Vue.filter('showStatus', function(val){
        return val.filter(v => v.show_status === 1);
    }
)

在組件里面使用

// 你用的是mapSate
computed：{
    ...mapState(['data'])
}
// 及 data = {orgData,playType1,orderStatus1}
2017年7月29日 19:19