Hey everyone, I'm a newcomer to Vue 3 and Typescript and currently facing a challenge with resolving a typescript error in my project. The error I'm encountering is related to the 'validate' method not being found, even though it shows up when I try to console log it.
The issue states: Property 'validate' does not exist on type 'string'.
https://i.sstatic.net/yu8u2.png
In my project, I am utilizing Vue 3 composition API along with Typescript and Vue Element Plus. Below is an excerpt from my component code for reference:
Component
<template>
<div class="w-full h-full absolute flex">
<el-form
class="w-4/5 sm:w-1/2 lg:w-1/3 xl:w-1/4 m-auto"
:ref="formRef"
:model="form"
:rules="rules"
>
<h2>Login</h2>
<el-form-item label="Email" prop="email">
<el-input
type="email"
autocomplete="off"
v-model="form.email"
/>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input
type="password"
autocomplete="off"
v-model="form.password"
/>
</el-form-item>
<el-form-item>
<el-button
type="success"
class="w-full"
@click="handleLogin"
>Submit</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, reactive, ref } from "vue";
export default defineComponent({
name: "Login",
setup() {
const form = reactive({
email: "",
password: ""
});
const rules = ref({
email: [{
required: true,
message: "Email is required",
trigger: "blur"
}],
password: [{
required: true,
message: "Password is required",
trigger: "blur"
}]
});
const formRef = ref("formRef");
const handleLogin = () => {
console.log(formRef)
// Property 'validate' does not exist on type 'string'.
formRef.value?.validate((valid: boolean) => {
console.log(valid);
});
};
onMounted(() => {
console.log("Login mounted");
});
onBeforeMount(() => {
console.log("Login onBeforeMount");
});
return {
formRef,
form,
rules,
handleLogin
};
}
});
</script>