Property does not exist on type Vue

Question

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?

Answer 1

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")
                                                ---------------------------------------
                                                                   👆
],