uni-app button disabled属性存在bug

uni-app button disabled属性存在bug

开发环境 版本号 项目创建方式
Windows win7 旗舰版 HBuilderX 
### 操作步骤：
```html
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<button class="button-yuanjiao" [@click](/user/click)="confirm" disabled="true">9点20分</button>
<button class="button-yuanjiao" [@click](/user/click)="confirma">9点40分</button>
<button class="add-btn" [@click](/user/click)="test">aideo</button>
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {

},
methods: {
test(){
this.vm="true";
},
confirm2(){
this.title="fdffff"
}
}
}
</script>

预期结果：

button不变灰色

实际结果：

button变灰色

bug描述：

disabled功能有问题，disabled="false",功能正常，disabled="ture",功能不正常；

更多关于uni-app button disabled属性存在bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你想button在disabled的时候，不变成灰色？

更多关于uni-app button disabled属性存在bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的代码，问题出现在 disabled 属性的使用方式上。在 uni-app 中，disabled 是一个布尔属性，其值应该使用 JavaScript 表达式或数据绑定，而不是字符串。

在你的代码中：

<button class="button-yuanjiao" [@click](/user/click)="confirm" disabled="true">9点20分</button>

这里 disabled="true" 被当作字符串字面量处理，而非布尔值。在 HTML 和 Vue 模板中，只要 disabled 属性存在，无论其值是什么，按钮都会被禁用。因此，即使设置为 disabled="false"，按钮仍然会被禁用，因为属性存在。

正确用法：

  1. 使用 :disabled 进行数据绑定：
<button :disabled="isDisabled">按钮</button>

在 data 中定义 isDisabled 为布尔值：

data() {
  return {
    isDisabled: true
  }
}
  1. 直接使用布尔值：
<button :disabled="true">按钮</button>

修复建议： 将你的代码改为：

<button class="button-yuanjiao" [@click](/user/click)="confirm" :disabled="true">9点20分</button>

或通过数据控制：

<button class="button-yuanjiao" [@click](/user/click)="confirm" :disabled="isDisabled">9点20分</button>
回到顶部