浏览器自动填充表单后vue无法获取表单内容的问题

浏览器自动填充表单后导致vue的双向绑定失效的问题

使用的是vue + element-ui 页面结构部分 使用ref获取到这个input标签

	<el-form-item prop="userName">
      <el-input placeholder="请输入账号"
                v-model="ruleForm.userName"
                @input="ruleForm.userName=ruleForm.userName.replace(/[^\u0040\u002e\u002d\u0061-\u007a\u0041-\u005a\u0030-\u0039]/g, '')"
                ref="userName"
                @blur="userNameOnBlur"
                clearable></el-input>
    </el-form-item>

js部分

在input的失焦事件时获取一下input标签的value,如果不为空,则说明这个表单可能被填充了,这时直接拿到这个值赋值一下就可以了

// 获取输入框的value值的方法
/**
 * 浏览器的自动填充表单的行为,会导致uvue的双向绑定失效, 这时直接读取一下相应 input的value值,如果存在则赋值即可
 */
getCont () {
  console.log(this.$refs.userName.$el.getElementsByTagName('input')[0].value, '用户名')
  console.log(this.$refs.password.$el.getElementsByTagName('input')[0].value, '密码')
  const userName = this.$refs.userName.$el.getElementsByTagName('input')[0].value
  const password = this.$refs.password.$el.getElementsByTagName('input')[0].value
  if (userName !== '') {
    this.ruleForm.userName = userName
    this.ruleForm.passWord = password
  }
},
/**
 * 用户名输入框的 失焦事件,用于处理浏览器自动填充表单时,vue无法获取表单内容的问题
 * 在失焦事件出发后, 如果ruleForm.userName 为空则读取一下 input的value值,如果不为空则使用这个值
 */
userNameOnBlur () {
  if (this.ruleForm.userName === '') {
    this.getCont()
  }
}