element ui 表单使用v-if切换导致校验规则失效的解决方案

现象

我用v-if切换单选，会导致已经绑定的校验规则失效。

代码

解决方案

方案很多，这里先贴出4种

• 方案一： 给每个item加一个key作为区分

因为form-item绑定验证事件是在mounted中进行的，规则变化后没有进行重新绑定验证事件，v-if渲染组件节点diff后被复用了，所以验证也就自然失效了

• 方案二：直接在item里写rules

• 方案三：使用校验函数

• 方案四：在外层包两层div