6

I'm trying to have build a vue.js project strictly typed with Typescript.

I use VeeValidate to build a form. I use a reference to the VeeValidate ValidationObserver to process the submitted form. I also use vue-class-component.

Here is how I tried to type the ValidationObserver component in my code.

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

When I try to compile this, I got the following error:

TS2749: 'ValidationObserver' refers to a value, but is being used as a type here.

How can I correctly type this repertoireForm $refs ?

1 Answer 1

11

The imports you want are actually ValidationProviderInstance and ValidationObserverInstance as without the Instance these refer to a Component.

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

And then later:

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

Edit

v3 has changed things. You can now use the InstanceType:

$refs!: {
    validationProviderRef: InstanceType<typeof ValidationProvider>,
    validationObserverRef: InstanceType<typeof ValidationObserver>
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.