时间戳

首页 > 解决方案 > 从验证中进行 Vuetify，如何修复验证功能错误消息？

typescript - 从验证中进行 Vuetify，如何修复验证功能错误消息？

问题描述

在 Vuetify 中使用验证方法，但错误消息如下所示↓ 我只想制作验证检查表单，并安装按下“提交”按钮并检查所有文本字段验证的功能。

我认为我的问题是在下面的代码中提交的验证（）方法。我遵循了 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>

我的英语不够好，请接受我的道歉。

标签： typescriptvue.jsvuetify.jsnuxt.js

解决方案

这与使用 Typescript 有关。由于您没有指定什么类型this.$refs.validation_check，它会寻找默认值，就像您出错一样：'Vue | Element | Vue[] | Element[]'并正确地告诉您它们validate()中的任何一个都不存在。

Vuetify 没有（至少目前）为其元素提供 typescript 支持，因此您需要创建自己的类型。我建议，而不是例如使用any. 那会破坏 TypeScript 的目的......

所以我建议以下，创建你的类型，根据你的意愿命名：

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;
  }
  // ...
}

推荐阅读