排查disabled问题之谷歌新版本特性-编程知识

排查disabled问题之谷歌新版本特性

问题复现

最近我突然接手一个后台的bug，这个后台很久没有迭代更新了，我也不熟悉业务，所以只能看一下源码，问题很快就复现，测试的修复操作也很正确，就是因为渲染的input标签中存在disabled='disabled’属性导致的。

不过很奇怪的是，我问之前是正常的吗？

这部分代码已经很久没有改动过了

但是测试和运营那边的人员都坚持，两个月前还是正常的，记录能够证明，我先怀疑的是，两个月前是正常的，那是不是两个月前有迭代，谁更新了什么依赖的版本导致出现的bug，然后就开始找仓库最后一次修改记录。

查找记录

确实这个仓库的最后一次提交记录是一个月前，然后我就仔细看了一下，是修改了什么导致的

但是最后一次修改记录中，也没有改到依赖package.json，也没有更新lock文件，只有三个文件的变化，这看着都不会影响全局的内容，最重要的是，没有改到相关页面的代码。

代码本地回滚

没有其他办法，我只能本地代码回滚，看看是不是上次迭代导致出现了bug，但是代码回滚之后，这个问题依然存在。

我开始思考，项目是vue2的，vue的版本是2.7.14

导致的原因是disabled属性

这是一个子组合，父组件传递的属性确实是false，而且不传递这个属性时，默认值也是false

问题修复

我写了一个在线的demo复现

https://codesandbox.io/s/intelligent-engelbart-3h9fcq

代码如下：

<template><div id="app"><HelloWorld msg="Hello Vue in CodeSandbox!" /><div class="box"><input disabled /></div><hr /><div class="box"><input :disabled="disabledVal" /></div></div>
</template><script>
import HelloWorld from "./components/HelloWorld";export default {name: "App",components: {HelloWorld,},data() {return {disabled: false,disabledVal: false,};},
};
</script><style>
#app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.box {width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;
}
</style>