Vuejs Vuetify Typescript验证

Question

我希望你能够帮忙翻译一下关于IT技术的内容。以下是需要翻译的内容：

我试图将vuejs与typescript结合使用，目前我正在尝试构建一个基本表单，并进行一些验证，但是visual studio code一直在给我错误提示。

我从我的验证函数中得到了第一个错误提示：

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

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

在我的清除函数中出现第二个错误:

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

类型'Vue | Element | Vue[] | Element[]'上不存在属性'clear'。在'type 'Vue''上不存在'clear'属性。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>

- junfo

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();
        }
    }
}

- Phillipe C

---

使用TypeScript编译器时，this.$refs.form在构建期间会出现错误。您需要将其分配到一个带有any类型的变量中，然后在新创建的变量上使用reset()方法。我在这里用代码片段解释了它：https://dev59.com/xlUK5IYBdhLWcg3w9jrb#64836692 - Daniel Danielecki