关于 Element UI 输入框记忆性失效的问题

前言

最近在开发项目的过程使用了 饿了么的 UI 组件，不过在开发过程中遇到了一个问题。
在使用 Element 的 input 输入框的时候即使开启了原生的记忆性输入属性（即自动补全），页面上也无法记住任何表单数据或者说用户名和密码。

问题由来？

基于 Vue 对已有进行项目重构，原有项目基于JQuery & Bootstrap，重构方案采用 Vue & Element，项目初版完成后发现原本登录页面输入框可以记忆密码的功能失效了，虽然网上大多数都建议不记忆密码并禁用输入框记忆密码的属性，但是输入框的记忆功能还是很方便的，所以打算恢复记忆功能。

解决途径：

1.追本溯源

由于使用的是 Element UI ，所以首先冲官方文档找解决方案，经过多番测试发现貌似 Element UI 官方实例中的输入框也无法记住密码，即使加上了官方文档中的 auto-complete="on" 依然无效。

2.Google 神器

网上并没有针对此问题的答案，于是换个方式搜索答案，搜索 “输入框的记忆属性”，几乎所有的回答都指向输入框或者表单的原生 autocomplete 属性，但是这个属性默认是自动打开的，详细说明见下图：

定义和用法

1、autocomplete 属性规定输入字段是否应该启用自动完成功能。
2、自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
提示：在某些浏览器中，您可能需要手动启用自动完成功能。

3.双管齐下

由于 DOM 是通过 Element UI 来进行渲染的，所以在加上了官方文档上的 auto-complete="on" 配置后，我还手动强制给渲染后的输入框加上的原生的 autocomplete 属性，依然没有丝毫效果。后来通过反复删减测试 runoob.com 上的列子，发现原来问题真正的源头在 name 属性！只有在删除例子中的 name 属性时，输入框的记忆属性才会失效，加上又会恢复。于是立马放入自己的项目中测试发现，果不其然 !

总结：

之所以项目中的输入框没有加上 name 属性，归根结底在于 Vue 的引入使得对数据的操作前所未有的方便，再加之双向数据绑定的特性，在提交表单时早已摒弃了原生通过 Form 来 submit 表单的方式 ，而是直接通过操作数据来进行提交，name 属性也就失去了其用意义。然而没想到的是 name 属性的意义并不只是在于提交表单这一方面，他还有一个隐藏属性：“支持表单的记忆功能”！

至此，通过加上 name 属性，问题圆满解决！

以上纯属个人学习总结，如有疏漏或者不足之处还望指正，谢谢！