Vuetify из проверки, как я могу исправить сообщение об ошибке функции проверки? - PullRequest
Новая
       147

Vuetify из проверки, как я могу исправить сообщение об ошибке функции проверки?

1 голос
/ 14 июля 2020

Использование методов проверки в Vuetify, но сообщение об ошибке указано ниже ↓ Я просто хочу создать форму проверки проверки и установить функцию, которая sh кнопку «отправить» и проверяет все проверки текстовых полей. * Я думаю, что моя проблема заключается в методах проверки submit () в моем коде ниже. Я воспользовался методом веб-сайта Vuetify, но появилось сообщение об ошибке.

Пожалуйста, помогите мне.

[сообщение об ошибке] Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'. Property 'validate' does not exist on type 'Vue'. 

    <template>
  <v-form ref="validation_check">
    <v-container>
      <v-row>
        <v-col cols="12" sm="6" md="3">
          <v-text-field
            label="name"
            v-model="text"
            :rules="[textValidation.required,textValidation.limit_lemgth]"
            counter="10"
          ></v-text-field>
        </v-col>
      </v-row>
      <v-row>
        <v-col cols="12" sm="6" md="3">
          <v-text-field
            label="phone"
            v-model="phone"
            :rules="[textValidation.required,textValidation.text_length2]"
            counter="7"
          ></v-text-field>
        </v-col>
      </v-row>
      <v-divider></v-divider>
      <v-row>
        <v-col cols="6">
          <v-btn @click="submit">submit</v-btn>
          <span v-if="success">Congurats★Validation is no prob!!</span>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

@Component({})
export default class form extends Vue {
  text: string = "";
  phone?: number;
  success:boolean=false;

  textValidation={
     required:(v:string)=>!!v||'this is required',
     limit_lemgth:(v:string)=>v.length<=10||'Name must be less than 10 characters',    
     text_length2:(v:string)=>v.length<=10||'Phone number must be less than 7 characters',
  };

  submit(){
    if(this.$refs.validation_check.validate()){
        this.success=true
    }else{
        this.success=false;
    }
    
}


}
</script>

My Engli sh недостаточно хорош, примите мои извинения.

1 Ответ

0 голосов
/ 14 июля 2020

Это связано с использованием Typescript. Поскольку вы не указали, какой тип this.$refs.validation_check, он будет искать по умолчанию, как будто вы ошиблись: 'Vue | Element | Vue[] | Element[]' и правильно сообщает вам, что validate() не существует ни на одном из них.

Vuetify не (по крайней мере, на данный момент) не имеет поддержки машинописного текста для своих элементов, поэтому вам нужно будет создать свой собственный тип. Я предлагаю это, а не, например, использовать any. Это противоречит цели TypeScript ...

Итак, я предлагаю следующее: создайте свой тип, назовите его так, как вы sh: 

export type VuetifyForm = Vue & { validate: () => void };

Если вы хотите добавить больше предоставленных функций, вы можете связать их с &, например: 

export type VuetifyForm = Vue & { validate: () => void } & { reset: () => void }

... столько, сколько вам нужно из функций (или всех из них).

Затем в ваш компонент, импортируйте тип и укажите this.$refs.validation_check в качестве этого типа, и ваша ошибка должна исчезнуть: 

import { VuetifyForm } from 'your/path';

// ....  

submit() {
  if ((this.$refs.validation_check as VuetifyForm).validate()) {
    this.success = true;
  }
  // ...
}
...