vue怎么根据状态显示各个按钮权限

Question

请问下面的按钮如何优雅的去判断，

//status -1,0,10,20,50
-1
订单详情

0
订单详情
去支付
取消订单

10
订单详情
取消

20
订单详情

50
订单详情
评价
申请退款
申请发票

<div class="item" v-for="(item,index) in orderList">
    <div class="r align-self-center">
        <div class="btn" v-if="item.status">订单详情</div>
        <div class="btn">去支付</div>
        <div class="btn">申请退款</div>
        <div class="btn">发票申请</div>
        <div class="btn">取消订单</div>
    </div>
</div>

Answer 1

第一步、给使用舰队保存菜单项，name为名称，handleClick为点击触发的函数

data(){
    return {
        permissionObj : {
            0:{name:"订单详情",handleClick:()=>{}},
            1:{name:"去支付",handleClick:()=>{}},
            2:{name:"取消订单",handleClick:()=>{}},
            3:{name:"评价",handleClick:()=>{}},
            4:{name:"申请退款",handleClick:()=>{}},
            5:{name:"发票申请",handleClick:()=>{}},
        },
        orderList:[]
    }
}

第二步，通过接口查询用户权限，比如在mounted之后请求接口又或者在vuex当中读取权限

axios.then((res)=>{
    const permissionCode = res.permissionCode;
    this.orderList.length = 0;// 这里设置0，再push是为了强制渲染视图
    this.orderList.push(...(()=>{ // 设置权限
            switch(permissionCode){
                case -1:
                case 20:
                    return [0];
                case 0:
                    return [0,1,2];
                case 10:
                    return [0,2];
                case 50:
                    return [0,3,4,5];
            }
        })().map(item=>this.permissionObj[item])
    )
})

第三步，html

<div class="item">
    <div class="r align-self-center">
        <div class="btn" v-for="(item,index) in orderList" @click="item.handleClick" >{{item.name}}</div>
    </div>
</div>

Answer 2

我喜欢这么干

order.canPay = function(){return (this.status === 0)}
order.canRefund = function(){return (this.status === 50)}
order.canInvoice = function(){return (this.status === 50)}
order.canCancel = function(){return (this.status === 0 || item.status === 10)}
order.canFeedback = function(){return (this.status === 50)}

<div class="r align-self-center">
    <div class="btn">订单详情</div>
    <div class="btn" v-if="item.canPay()"去支付</div>
    <div class="btn" v-if="item.canRefund()">申请退款</div>
    <div class="btn" v-if="item.canInvoice()">发票申请</div>
    <div class="btn" v-if="item.canCancel()">取消订单</div>
    <div class="btn" v-if="item.canFeedback()">评价</div>
</div>

Answer 3

<div class="r align-self-center">
    <div class="btn">订单详情</div>
    <div class="btn" v-if="item.status === 0">去支付</div>
    <div class="btn" v-if="item.status === 50">申请退款</div>
    <div class="btn" v-if="item.status === 50">发票申请</div>
    <div class="btn" v-if="item.status === 0 || item.status === 10">取消订单</div>
    <div class="btn" v-if="item.status === 50">评价</div>
</div>