记 · ElemetnUI + Vue v-if 视图切换踩过的那些坑

使用EleUI 做一个用户登录窗口,需要用v-if 动态切换三个表单:手机登录、账密登录和密码找回。其中需要实现一个重置表单的功能,但其间出了一些小bug。密码找回表单中有三个表单项,手机登录和账密登录都是两个表单项,它们都是按照EleUI API 说明设置了prop 来进行对应。但密码找回的第三个表单项就是无法进行重置,后来实践得出的结果是:只有初始挂载到DOM 上的表单能够正常重置,方式动态通过v-if 切换过的表单项,都无法正常进行重置。后来在网上搜寻答案,看到有一个说给表单项绑定一个唯一值key 便可解决。我试了试,哎,还真就可以。有点纳闷,之前只知道在用v-for 设置Dom 元素的时候需要用唯一key 值进行绑定,我这v-if 切换的元素不是已经动态的在Dom 上卸载和重新挂载了吗,为什么多个el-form-item 之间还是会造成影响呢?我想了想,这多半是跟Vue 渲染Dom 时的操作有关,苦于能力有限,之前v-for 绑定key 值的理论也不是吃得很透,现在暂时知晓这么个方法,有机会再深入研究吧!