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

这里写自定义目录标题

1种
- html
- data
- 方法
2种
- html
- data
- 方法
最后

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接口返回的就是设置为trueisDisabled: {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

最后

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

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

python 美团api接口对接_python实现比对美团接口返回数据和本地mongo数据是否一致示例...
本文实例讲述了python实现比对美团接口返回数据和本地mongo数据是否一致.分享给大家供大家参考,具体如下: 应用背景:美团平台商品的上下架状态.库存.售价,和mongo库存储的是否一致. too ...
Charles 修改接口返回数据
前言测试中,我们经常会遇到一些边界值数据很难造出来,首先能想到的是能否可以模拟这些场景,以覆盖case,这时经常需要修改接口请求或者返回数据.在我之前的文章有介绍如何通过打断点的方式进行修改, ...
springboot 接口返回数据时 net.sf.json.JSONNull[“empty“]) 异常
springboot 接口返回数据时 net.sf.json.JSONNull["empty"]) 异常参考文章: (1)springboot 接口返回数据时 net.sf.js ...
酷友观点/经验：支付接口返回数据接收地址，session数据丢失（或者说失效）的问题浅析(原创文章)...
酷友观点/经验:支付接口返回数据接收地址,session数据丢失(或者说失效)的问题浅析(原创文章) 最近手头在开发一个游戏官网,在支付模块采用神州付技术支持,神州付数据表单中要求提供服务器返回地址和 ...
F12 界面：请求响应内容 Preview 和 Response 不一致、接口返回数据和 jsp 解析到的内容不一致
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 情况描述: 我有一个接口只是简单的查询列表数据并返回给前端作一个表格展示. 接口返回的 use ...
php验证返回值,php接口返回数据用echo 还是return?
php接口返回数据用echo 还是return? 作者:PHPYuan 时间:2018-06-10 23:40:39 框架用多了,也是有坏处的,之前一直用框架写接口,返回数据时都是用的return ...
php app接口id参数类型过滤,PHP开发APP接口---返回数据的封装类
/** * app返回数据类 * 1.接受多维,缺少键名的数组, * 2.可由输入的format参数决定返回数据格式 * 例子:Response::show(200, 'success', $data ...
高德逆地理编码接口返回数据格式不统一以及百度逆地理编码接口返回数据解析失败的踩坑记录
最近有个需求是定位后根据定位的经纬度获取当前地址的详细信息,例如获取街道名称,街道号,乡镇街道编码,区域编码等信息. 于是乎找到了高德的逆地理编码接口,看了看正好符合我的需求.然而使用起来并不顺利! ...
接口返回html转换josn,接口返回数据Json格式处理
有这样一个页面 , 用来显示用户的账户记录数据,并且需要显示每个月的收入支出合计 ,在分页的时候涉及到一些问题,需要对返回的Json格式做处理,处理起来比较麻烦,后端返回的Json数据格式形式如下 ...

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

这里写自定义目录标题

1种

html

data

方法

2种

html

data

方法

最后

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

最新文章

热门文章