A
A
Alexander Epikhin2020-07-07 17:21:40
typescript
Alexander Epikhin, 2020-07-07 17:21:40

Why does TypeScript swear?

Vue, Element UI, TypeScript, vue-class-component, vue-property-decorator.
TypeScript swears at:

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(); - аналогичная ошибка

The code:
<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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Aetae, 2020-07-07
@leshiple

Typescript only works with code, it doesn't know what's in the Vue template, alas. Therefore $refs, it has bare Vue or Element components.
I personally manually specify through the union of interfaces - I add an overlap at the bottom:

@Component
export default class Login extends Vue { 
  // ...
}
export default interface Login {
  $refs: {
     loginForm: any; // на самом деле не any, а интерфейс компонента, поддерживающий нужные методы
  }
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question