vue.js - vue，veeValidator，以编程方式验证字段

Question

我需要以编程方式验证文件类型，然后执行以下操作：

<template>
<ValidationObserver
 ref="form"
 tag="form"
 type="form"
 autocomplete="off"
 @submit.prevent="submit()"
>
<div class="box-body">
  <div class="row">
    <div class="col-lg-8 col-md-6 col-xs-12">
      <ValidationProvider
        v-slot="{ errors, validate }"
        rules="ext:csr"
        ref="csr"
        :name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
      >
        <div
          class="form-group"
          :class="{'has-error': errors.length}"
        >
          <label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
          <input
            id="csr"
            required
            type="file"
            @change="validate"
            @blur="getCsrInfo($event,'csr')"
          >
          <FormErrorSpan :errors="errors" />
        </div>
      </ValidationProvider>
      .
      .
      .
      <script>
      import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
      import { required, confirmed, integer, ext } from 'vee-validate/dist/rules'
      import FormErrorSpan from '@/components/Base/templates/forms/FormErrorSpan'
      .
      .
      .
        methods: {
             async getCsrInfo(event, certyficateItem) {

             //UNFORTUNATELLY THIS ALWAYS RETURN TRUE
             console.log(await this.$refs.csr.validate())

            SSLCertificatesAPI
           .getCsrInfo(event.target.files[0])
           .then(data => {
            this.previewFn(data.data.info)
            this.getFileContent(event, certyficateItem)
        })
     },
     .
     .
     .

据我了解 await this.$refs.csr.validate() 应该返回 false，然后文件的扩展名错误。但不幸的是，它总是正确的。我尝试在一个 @change 中调用 validate 和 getCsrInfo($event,'csr')，但验证也不起作用。

Answer 1

I got it!I found that validate metod in @input work perfectly here.

  <ValidationProvider
    v-slot="{ errors, validate }"
    rules="ext:csr"
    ref="csr"
    :name="$t('central_system.administration.ssl_certifications.csr').toLowerCase()"
  >
    <div
      class="form-group"
      :class="{'has-error': errors.length}"
    >
      <label for="csr">{{ $t('central_system.administration.ssl_certifications.csr') }}</label>
      <input
        id="csr"
        required
        type="file"
        //THATS WORK
        @input="validate"
        @change="getCsrInfo($event,'csr')"
      >
      <FormErrorSpan :errors="errors" />
    </div>
  </ValidationProvider>