Property does not exist on type Vue-CodePudding

I am using ref to get a value and I am getting Property 'value' does not exist on type 'Vue' as an error.
Here is my code

  confirmPasswordRules: [
          (v: string ) => !!v || "Password is required",
          (v: string ) => (this.$refs.password) && (v === this.$refs.password.value  || "Passwords do not match")
  ],

I used console.log to print out this.$refs.password.value so it does have a value. I also tried (this.$refs.password as Vue & { password: () => string }).validate()) to validate value and this didn't work. What changes do I need to make?

CodePudding user response：

Computed property are parsed before the onMount event, meaning that the template part is not rendered yet and refs are not in place. You might check if your ref exists before firing the action.

(v: string ) => (this.$refs?.password?.value) && (v === this.$refs.password.value  || "Passwords do not match")

CodePudding user response：

Template refs are of type unknown, so they need to be type-asserted as the target element's type. Assuming the template ref is on an <input>, the type assertion would be as HTMLInputElement:

confirmPasswordRules: [
  (v: string) => this.$refs.password && (v === (this.$refs.password as HTMLInputElement).value  || "Passwords do not match")
                                                ---------------------------------------