Vue.js, Typescript и VeeValidate печатать - PullRequest
Новая
       10

Vue.js, Typescript и VeeValidate печатать

0 голосов
/ 03 октября 2019

Я пытаюсь создать проект vue.js, строго типизированный с помощью Typescript.

Я использую VeeValidate для создания формы. Я использую ссылку на VeeValidate ValidationObserver для обработки отправленной формы. Я также использую vue-class-component.

Вот как я пытался ввести компонент ValidationObserver в своем коде. 

<template>
  <ValidationObserver tag="form" ref="repertoireForm" @submit.prevent="submitForm">
    <ValidationProvider rules="required"></ValidationProvider>
  </ValidationObserver>
</template>


<script lang="ts">

import Vue from 'vue';
import Component from 'vue-class-component';
import {ValidationObserver, ValidationProvider} from 'vee-validate';

@Component({
  components: {
    ValidationObserver,
    ValidationProvider,
  },
})
export default class RepertoireForm extends Vue 
  $refs!: {
    // here is what I'm trying to type
    repertoireForm: ValidationObserver,
  }

  async submitForm(e: Event): Promise<void> {
    const valid = await this.$refs.repertoireForm.validate();

    // some submit routine here
  }
}
</script>

Когда я пытаюсь скомпилировать это, я получил следующую ошибку:

TS2749: «ValidationObserver» ссылается на значение, но используется здесь как тип.

Как правильно ввести этот repertoireForm $ refs?

1 Ответ

0 голосов
/ 03 октября 2019

На самом деле вы хотите импортировать ValidationProviderInstance и ValidationObserverInstance, так как без Instance они относятся к компоненту. 

import { ValidationProviderInstance, ValidationObserverInstance } from 'vee-validate'

А потом: 

const valid = await (this.$refs.repertoireForm as ValidationObserverInstance).validate()
...