在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 在vuex的store里獲取的數(shù)據(jù)如何做分類處理，并添加屬性

在vuex的store里獲取的數(shù)據(jù)如何做分類處理，并添加屬性

我在 vuex中請(qǐng)求到的數(shù)據(jù)：

data: [
    {
    id: 1,
    play_alias: 'basketball', // 商品簡(jiǎn)稱
    play_type: '001', // 玩法
    order_status: 1, // 0.待支付; 1.支付成功,待出票; 2.出票成功,待開獎(jiǎng); 3.出票失敗,待退款, 4.已退款, 5.未中獎(jiǎng), 6.已中獎(jiǎng)
    show_status: 1,  // 顯示狀態(tài); 0,不顯示（用戶刪除）, 1,顯示
    
    },
    {
    id: 2,
    play_alias: 'football'
    play_type: '003',
    order_status: 4,
    show_status: 1,
    }
]

需要這樣展示：

圖片描述

問(wèn)題：

  1. 根據(jù)show_status判斷是否顯示；
  2. 根據(jù)order_status分類，中獎(jiǎng)、待開獎(jiǎng)、未開獎(jiǎng)；
  3. 根據(jù)play_alias添加固定的中文名(我的想法是根據(jù)play_alias添加一個(gè)play_name屬性，然后直接渲染play_name上去就好了)
回答
編輯回答
奧特蛋

1.一般這個(gè)可以讓后臺(tái)把返回值修改一下,
2.你也可以前端在返回來(lái)的值用comouted做一個(gè)處理,
3.還可以定義一個(gè)過(guò)濾器處理對(duì)應(yīng)返回的值

Vue.filter("formatAlias",function(playalias){
  if(playalias=='basketball'){
      playalias=="籃彩"
  }
})
2018年2月16日 21:58
編輯回答
厭惡我

1.可以在組件里加filter，具體怎么用可以看vue的文檔，有專門的filter講解（不鼓勵(lì)做伸手黨，看文檔能學(xué)到更多的東西
2.差值表達(dá)式可以執(zhí)行簡(jiǎn)單的js代碼，分支過(guò)多還是算了。或者在請(qǐng)求返回交給state之前處理掉
3.如果中文名稱與play_alias字段的映射關(guān)系不想維護(hù)在前端可以增加一個(gè)字段，否則也可以用第二條，在返回后交給state之前處理掉

2017年6月27日 09:46
編輯回答
熟稔

其實(shí)就是數(shù)據(jù)的過(guò)濾，轉(zhuǎn)化

//html
<ul>
 <li v-for="(item,index) in data" :key="index" v-if="item.show_status">
     <span>{{item.play_type}}</span>
     <span>{{getName(item.play_alias)}}</span>
     <span>{{getStatus(item.order_status)}}</span>
 </li>
</ul>

//js
methods:{
 getName(text){
     switch(text){
         case 'basketball':return '籃球';
         case 'football':return '足球';
         default : return "未知"
     }
 },
 getStatus(text){
     switch(text){
         case 0:return '待支付';
         case 1:return '支付成功,待出票';
         case 2:return '出票成功,待開獎(jiǎng)';
         case 3:return '出票失敗,待退款';
         case 4:return '已退款';
         case 5:return '未中獎(jiǎng)';
         case 6:return '已中獎(jiǎng)';
         default : return "未知"
     }
 },
}
2017年4月1日 15:34