Question

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

我从validate函数中得到了第一个错误：

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

类型'CombinedVueInstance不存在属性'snackbar'

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

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

类型'Vue |不存在属性'clear'元素| 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();
        }
    }
}

Vuejs Vuetify打字稿验证

1 个答案: