Vuejs Vuetify Typescript 验证

Question

我正在尝试将 vuejs 与 typescript 结合使用。目前我正在尝试构建一个带有一些验证的基本表单，但 Visual Studio 代码不断给我错误。

我的验证功能出现了第一个错误：

validate(): void {
  if((this.$refs.form as Vue & { validate: () => boolean }).validate()) {
    this.snackbar = true
  }
},

“CombinedVueInstance”类型上不存在属性“snackbar”

在我的 clear 函数中，第二个错误：

clear(): void {
  this.$refs.form.clear();
},

“Vue | 类型”上不存在“清除”属性元素 | Vue[] | 元素[]'。类型上不存在属性“clear” 'Vue'.Vetur(2339)

到目前为止，组件/FormComponent 看起来是这样的：

<template>
    <v-container class="fill-height">
      <v-row
        align="center"
        justify="center"
      >
        <v-form
          ref="form"
          v-model="valid"
          lazy-validation
        >
          <v-text-field
            v-model="name"
            :counter="10"
            :rules="nameRules"
            label="Name"
            required
          ></v-text-field>

          <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
          ></v-text-field>

          <v-select
            v-model="select"
            :items="items"
            :rules="[v => !!v || 'Item is required']"
            label="Item"
            required
          ></v-select>

          <v-checkbox
            v-model="checkbox"
            :rules="[v => !!v || 'You must agree to continue!']"
            label="Do you agree?"
            required
          ></v-checkbox>

          <v-btn
            :disabled="!valid"
            color="success"
            class="mr-4"
            @click="storeUser"
          >
            Validate
          </v-btn>

          <v-btn
            color="error"
            class="mr-4"
            @click="clear"
          >
            Leeren
          </v-btn>
        </v-form>
      </v-row>
    </v-container>
</template>

<script lang="ts">
import axios from 'axios';
import Vue from 'vue';
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

export default Vue.extend({

  data: () => ({
    valid: true,
    name: '',
    nameRules: [] = [
      (v: any) => !!v || 'Name is required',
      (v: any) => (v && v.length <= 10) || 'Name must be less than 10 characters',
    ],
    email: '',
    emailRules: [
      (v: any) => !!v || 'E-mail is required',
      (v: any) => /.+@.+\..+/.test(v) || 'E-mail must be valid',
    ],
    select: null,
    items: [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4',
    ],
    checkbox: false,
  }),

  methods: {
    validate(): void {
      if((this.$refs.form as Vue & { validate: () => boolean }).validate()) {
        this.snackbar = true // Property 'snackbar' does not exist on type 'CombinedVueInstance<Vue ...
      }
    },

    clear(): void {
      this.$refs.form.clear(); 
      //Property 'clear' does not exist on type 'Vue | Element | Vue[] | Element[]'.
      //Property 'clear' does not exist on type 'Vue'.Vetur(2339)
    },

    storeUser(): void {
      this.validate();
    }
  }
})
</script>

Answer 1

试试这个。

export default {
    data: () => ({
        // Property 'snackbar' does not exist
        snackbar: false
    }),
    methods:{
        clear(): void {
            // Property 'clear' does not exist on type
            // formElement.reset()
            // https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset    
            this.$refs.form.reset();
        }
    }
}