Почему ругается TypeScript?

Vue, Element UI, TypeScript, vue-class-component, vue-property-decorator.
TypeScript ругается на:
this.$refs.loginForm.validate((valid: boolean) => {} - Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'validate' does not exist on type 'Vue'.

this.$refs.loginForm.resetFields(); - аналогичная ошибка

Код:
<template>
  <el-form :model="form" :rules="rules" ref="loginForm" label-width="80px" class="auth-form">
    <h3>Вход</h3>
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item label="Пароль" prop="password">
      <el-input v-model="form.password"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">Войти</el-button>
  </el-form>
</template>
<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import { ElForm } from 'element-ui/types/form';
@Component
export default class Login extends Vue {
  @Ref("loginForm") readonly loginForm!: ElForm
  form = {
    email: "",
    password: ""
  }
  rules = {
    email: {
      required: true,
      message: 'Введите email',
      trigger: 'blur'
    },
    password: {
      required: true,
      message: 'Введите пароль',
      trigger: 'blur'
    },
  }
  submitForm(): void {
    this.$refs.loginForm.validate((valid: boolean) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  }
  resetForm(): void {
    this.$refs.loginForm.resetFields();
  }
}
</script>
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
Aetae
@Aetae
Тлен
Typescript работает только с кодом, он не знает что-там в Vue шаблоне, увы. Потому в $refs у него лежат голые компоненты Vue или Element'ы.
Я лично вручную указываю через объединение интерфейсов - внизу добавляю перекрывающий:
@Component
export default class Login extends Vue { 
  // ...
}
export default interface Login {
  $refs: {
     loginForm: any; // на самом деле не any, а интерфейс компонента, поддерживающий нужные методы
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы