getError() {
let key = Object.keys(this.errors)[0] this.firstError = this.errors[key] console.log('firstError' + this.firstError)
}
Object.keys(this.errors)返回errors对象下的所有可枚举属性，并且取第一个作为键名，取出对于的值赋值给firstError ,firstError是提示框文字
<toast v-model="showErrorToast"
type="text"
width="auto"
:time="600">{{ firstError }}</toast>当点击错误图标判断是否有firstError，shouldToastError未传入值默认为true，点击时如果valide校验为错误时会触发getError函数将错误提示赋值给firstError，所以会将fistError对应的提示信息显示出来。而图标的显示与否与valid有关,其中一个条件是valid为false时才会显示。
<icon @click.native="onClickErrorIcon"
class="vux-input-icon"
type="warn"
:title="!valid ? firstError : ''"
v-show="showWarn"></icon> shouldToastError: {
type: Boolean,
default: true
}
showWarn() {
return (
!this.novalidate &&
!this.equalWith &&
!this.valid &&
this.firstError &&
(this.touched || this.forceShowError)
)
}
onClickErrorIcon() {
if (this.shouldToastError && this.firstError) {
this.showErrorToast = true
}
this.$emit('on-click-error-icon', this.firstError)
}
分析了上面的代码，为什么执行了reset方法后，校验报错还是在，原因是valid依然还是false，导致showWarn返回值是ture，而reset中方法中明明将valid设置为true了，为什么最后结果为false。
watch:{
currentValue(newVal, oldVal) {
if (newVal && this.equalWith) {
if (newVal.length === this.equalWith.length) {
this.hasLengthEqual = true
}
this.validateEqual()
} else {
this.validate()
}
}
}因为监听了input绑定currentValue的值，当reset方法执行的时候this.currentValue = ‘ ‘ 触发了变动执行validate方法，导致再次给this.valid赋值false。
该如何解决这个问题，问题发生的原因是currentValue发生变化导致触发validate方法校验，所以我们只要当执行reset方法后不触发currentValue改变就可以不触发validate方法校验
方法一:
onSubmitClick() {
this.$refs.group.$children.forEach(child => {
// 这次reset是将currentValue全部置为""
child.reset()
})
this.$nextTick(() => {
// 当所以input的值都置为空后在此执行reset方法，这次前后currentValue没有发生变化不会触发validate校验所以valide为true不会导致图标出现
