element表单disabled功能失效问题

element表单disabled功能失效问题

场景:当需要根据商品状态来判断是否开启disabled来禁用表单时, disabled绑定了对应的值, 但无论商品是哪种状态, 表单都能操作, disabled失效

html 复制代码
<el-form-item label="商品分类">
            <el-select
              v-model="form.packagesTypeIdList"
              :disabled="(form.saleFlag === 0 || form.saleFlag === 2) ? false : true"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in packagesTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

解决: 在form对象里加入saleFlag的默认值

js 复制代码
data() {
 return {
 	form: {
		saleFlag: 0
	}
 }
}

原因: 虽然disabled绑定的对象是动态获取的, 但没有声明默认值会造成绑定失效

相关推荐
小桥风满袖14 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花30 分钟前
i18n国际语言化配置
前端
编程贝多芬34 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort35 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio37 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗40 分钟前
JS的对象属性存储器
前端
Lotzinfly41 分钟前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果42 分钟前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端
普郎特1 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript