vue根据接口返回数据状态给按钮动态设置disabled属性

1种

html

<b-button variant="success" 
@click="getCancel" 
:disabled="isDisabled.status === 0 || isDisabled.status === 1 || isDisabled.status === 2 ?false : true">测试</b-button

data

// 0 、1、2j接口返回的就是设置为true
 isDisabled: {
    
    
      status: null
}

方法

接口返回并且赋值status

submitCancel(hide) {
    
    
    // 返回状态取消后设置disabled Disable
    // console.log('valll');
    const _this = this;
    _this.tableBusy = true;
    let id = _this.detailsData.id
    _this.$store
        .dispatch("purchaseOrder/getPurchaseOrderCancel", {
    
    
            id: id
        })
        .then((res) => {
    
    
        // 看接口返回的0~2就是true，超过就是false
            _this.isDisabled =res.status
        })
        .finally(() => {
    
    
            _this.tableBusy = false;
            hide();
        });
},

2种

html

<b-button variant="success" @click="getCancel" :disabled="isDisabled">Cancel</b-button>

data

isDisabled: false,// 按钮是否禁用，接口返回cancel代表设置为true 
// 注意：这里false一定不要加双引号代表是字符串，直接写true，或者false代表布尔值

方法

接口返回并且赋值status

submitCancel(hide) {
    
    
            // 返回状态取消后设置disabled
            // console.log('valll');
            const _this = this;
            _this.tableBusy = true;
            let id = _this.detailsData.id
            _this.$store
                .dispatch("purchaseOrder/getPurchaseOrderCancel", {
    
    
                    id: id
                })
                .then((res) => {
    
    
                    // 主要这里返回的是1代表设置为true ！！！
                    if (res === 1) {
    
    
                        _this.isDisabled = true
                    }
                })
                .finally(() => {
    
    
                    _this.tableBusy = false;
                    hide();
             });
 },

如果遇到新的方法还会来此处更新,大家有新的方法也可以写在评论区,可以借鉴参考一下,共同进步！！！
参考1
参考2
参考3
参考4

最后

感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！