“我正在参加「掘金·启航计划」”。

一、前言

最近有些繁忙，加上合同快到期正在考虑下路就没怎么更文。刚好后台推送了参加活动的消息，要求的量不多就可以冲一冲，今天就简单复述下之前项目里遇到的一个奇怪问题吧。

二、问题描述

表单组件是我们常用的组件，这天我像往常一样，熟练的写完一个又一个表单，刷刷地就提交代码下班了（来自切图仔的自信）。

这时的我还没有发现问题的严重性，直到第二天看到那如山的bug单后，汗不自觉的流了下来。

因为不同表单的内容不同，而且很多就有联动，我就用这v-if去控制切换了，也刚好能规避掉rule规则，根据选中模式的不同，必填项也不同，所以就只好用v-if进行销毁控制了。

然后现象就是这样以下这种：

表单、添加的时候，一切正常，多次切换v-if，input框都是正常
修改的时候，赋了初值，也正常，但多次切换v-if重新渲染后，input框
只能输入数字和中文，英文字母、符号等，均无法输入。

关键还不是所有的表单都会有这个问题，我提交了N个表单，只有少部分表单会出现这种现象。

这就很难受了啊，有bug不可怕，怕就怕是这种不确定的偶发bug，没法定性成常规问题，只能一点点摸索。

三、思索

其实这里就有点怀疑了，是不是赋值了type=”number”属性，但是我又没给这个input加上number属性，也没有做其他的输入限制，光从网页dom元素那边也看不出来区别。

折磨了好久，都没啥效果，好不容易才从某个帖子里得到启发。

然后我就想起来了，因为v-if销毁后，同个位置是一个只能输入数字的input，估计就是这个导致的，复用了type属性。

四、解决

尝试在表单中加入key属性，果然成功，那么问题就是出在这里了
因为v-if在两个相同组件且没有key标识唯一性的情况下，会复用已有元素而不是从头开始渲染

最终解决，在每个el-form-item加上key值，bug就消失了（直接在input组件加key也可以解决，只是我倾向于在v-if同层添加key值）。

五、一点思考

这次的bug基本上算是意外，种种巧合之下才出现。

但还是有疑问没能解决：

1、为什么表单添加的时候，不会有这种问题，是因为没赋初值的问题吗？
2、这种复用会给平时的代码带来不确定性，明面上逻辑没出问题，但是实际上却是有隐患的
这种情况该如何高效规避？

有兴趣的小伙伴可以试试看，能不能复现我的bug。

ps: 我是地霊殿__三無，希望能帮到你。