记 · 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 值的理论也不是吃得很透，现在暂时知晓这么个方法，有机会再深入研究吧！