Element: [Bug Report] uses element error in typescript

Created on 9 May 2018 · 4Comments · Source: ElemeFE/element

Element UI version

0.1.0

OS/Browsers version

mac os / chrome

Vue version

2.5.17-beta.0

Reproduction Link

https://www.jsfiddle.com/not.necessary

Steps to reproduce

代码如下

import { isvalidUsername } from "@/utils/validate"
import { Vue } from "vue-property-decorator"

export default Vue.extend({
  name: "login",
  data() {
    const validateUsername = (rule: any, value: string, callback: Function) => {
      if (!isvalidUsername(value)) {
        callback(new Error("Please enter the correct user name"))
      } else {
        callback()
      }
    }
    const validatePassword = (rule: any, value: string, callback: Function) => {
      if (value.length < 6) {
        callback(new Error("The password can not be less than 6 digits"))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: "admin",
        password: "1111111"
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername }
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePassword }
        ]
      },
      passwordType: "password",
      loading: false,
      showDialog: false
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = ""
      } else {
        this.passwordType = "password"
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid: boolean) => {
        if (valid) {
          console.warn('success')
          this.loading = true
        } else {
          console.warn("error submit!!")
          return false
        }
      })
      // console.warn("this.$refs.loginForm", this.$refs.loginForm)
    }
  }
})

What is Expected?

Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.

会提示这个错误

What is actually happening?

能正常使用表单验证

Source

mimimile

👍1

All 4 comments

Translation of this issue:

Element UI version
0.1.0

OS/Browsers version
Mac OS / Chrome

Vue version
2.5.17-beta.0

Reproduction Link
https://www.jsfiddle.com/not.necessary

Steps to reproduce
The code is as follows

` '.
Import {isvalidUsername} from "@/utils/validate"

Import {Vue} from "vue-property-decorator"
Export default Vue.extend ({

Name: "login",
Data () {

Const validateUsername = (rule: any, value: string, callback: Function) = {
If (! IsvalidUsername (value)) {

Callback (New Error ("Please enter the correct user name"))
} else {

Callback ()
}

}
Const validatePassword = (rule: any, value: string, callback: Function) = {

If (value.length < 6) {
Callback (New Error ("The password can not be less than 6 digits")

} else {
Callback ()

}
}

Return {
LoginForm: {

Username: "admin",
Password: "1111111"

},
LoginRules: {

Username: [
{required: true, trigger: "blur", validator: validateUsername}

]
Password: [

{required: true, trigger: "blur", validator: validatePassword}
]

},
PasswordType: "password",

Loading: false,
ShowDialog: false

}
},

Methods: {
ShowPwd () {

If (this.passwordType = = = "password") {
This.passwordType = ""

} else {
This.passwordType = "password"

}
},

HandleLogin () {
This.$refs.loginForm.validate ((valid: Boolean) = {

If (valid) {
Console.warn ('success')

This.loading = true
} else {

Console.warn ("error submit!!!!")
Return false

}
})

/ / console.warn ("this.$refs.loginForm", this.$refs.loginForm)
}

}
})

` '.
What is Expected?

` '.
Property'validate'does not exist on type'Vue Element Element Vue[] Vue[] Element[]'.

` '.
It will prompt this error

What is actually happening?
Normal use of form validation

element-bot on 9 May 2018

解决了是类型定义的问题
需要给this.$refs[name]一个类型定义

const el: any = this.$refs[name]

下面是参考链接
https://segmentfault.com/q/1010000013027726

mimimile on 9 May 2018

👎8 👍1

 (<ElForm>this.$refs.form).validate((valid) => {
     ...
})

a631807682 on 1 Apr 2019

😕1 👍1

You can do something like that:

(this.$refs[formName] as Vue & { validate: (cb: (valid: boolean) => void) => void }).validate((valid: boolean) => {
      if (valid) {
        console.log('valid');
      } else {
        console.log('error');
      }
});