javascript - Vue 3 Typescript no se puede acceder al método desde ref

Hola a todos, soy nuevo en Vue 3 y Typescript y estoy teniendo dificultades tratando de resolver un error de Typescript en mi proyecto. A continuación se muestra el error de Typescript.

No puede encontrar el método validate, pero aparece cuando intento mostrarlo en la consola.

La propiedad 'validate' no existe en el tipo 'string'.

Estoy usando la API de composición de Vue 3 con TypeScript y Vue Element Plus, a continuación está el código de mi componente.

Componente

    <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>

Respuesta #1

Hay algunos errores. ref recibe un tipo primitivo como string, boolean, etc... para objetos usa reactive.

así que deberías definir las reglas usando reactive, no ref.

const rules = reactive({
      email: [{
        required: true,
        message: "Email is required",
        trigger: "blur"
      }],
      password: [{
        required: true,
        message: "Password is required",
        trigger: "blur"
      }]
    });

No necesitas enlazar tu ref, así que hazlo de esta manera:

 <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"
        >

Y te recomiendo declarar tu formRef usando el casteo de objetos HTML.

así:

const formRef = ref<HTMLFormElement>();

Espero que te ayude =)