vue 中的打字稿 - 类型 'Vue | 中不存在属性'validate'元素 |Vue[] |元素[]'. [英] Typescript in vue - Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.

问题描述

我像这样创建了v-form

...<v-btn:disabled="!valid"@click="提交">提交</v-btn></v-form>

脚本:

if (this.$refs.form.validate())//错误在这里

如果我只是 console.log(this.$ref.form)validate() 函数可用.但是为什么在构建时会出现这个错误?

解决方案

解决方案:

简单:

(this.$refs.form as Vue & { validate: () => boolean }).validate()

替代(如果您在组件中多次引用this.$refs.form，请使用此选项):

计算:{表单():Vue &{ 验证:() =>布尔值 } {返回 this.$refs.form 作为 Vue &{ 验证:() =>布尔值 }}}//像这样使用它: this.form.validate()

可重用 (如果您在应用程序中多次使用 v-form 组件，请使用此功能):

//在一个 TS 文件中导出类型 VForm = Vue &{ 验证:() =>布尔值 }//在组件中，导入`VForm`计算:{形式():VForm {将 this.$refs.form 作为 VForm 返回}}

<小时>

说明:

在 Vue 模板语法中，我们可以在 Vue 实例或 DOM 元素上使用 ref 属性.如果在 v-for 循环中使用 ref，则检索 Vue 实例或 DOM 元素的数组.

这就是为什么 this.$refs 可以返回 Vue |元素 |Vue[] |元素[].

为了让 TypeScript 知道正在使用哪种类型，我们需要转换该值.

我们可以:

(this.$refs.form as Vue).validate() 或 (this.$refs.form).validate()

我们将它转​​换为 Vue 因为 v-form 是一个 Vue 实例(组件)而不是 Element>.

我个人的偏好是创建一个计算属性，该属性返回已转换的 Vue 实例或 DOM 元素.

即.

计算:{表单():Vue {返回 this.$refs.form 作为 Vue}}

<小时>

v-form 实例有一个返回布尔值的 validate 方法，所以我们需要使用一个交集类型文字:

计算:{表单():Vue &{ 验证:() =>布尔值 } {返回 this.$refs.form 作为 Vue &{ 验证:() =>布尔值 }}}

然后我们可以这样使用它:this.form.validate()

<小时>

更好的解决方案是创建一个带有交集的类型，以便它可以在多个组件之间重用.

导出类型 VForm = Vue &{ 验证:() =>布尔值 }

然后在组件中导入:

计算:{形式():VForm {将 this.$refs.form 作为 VForm 返回}}

I created v-form like this

<v-form ref="form" v-model="valid" lazy-validation>
  ...
  <v-btn
     :disabled="!valid"
     @click="submit"
   >
     submit
   </v-btn>
</v-form>

script:

if (this.$refs.form.validate()) // Error is in here

If i just console.log(this.$ref.form) the validate() function is available. But why this error is coming while building?

解决方案

Solutions:

Simple:

(this.$refs.form as Vue & { validate: () => boolean }).validate()

Alternative (use this if you reference this.$refs.form multiple times in your component):

computed: {
  form(): Vue & { validate: () => boolean } {
    return this.$refs.form as Vue & { validate: () => boolean }
  }
} // Use it like so: this.form.validate()

Reusable (use this if you use the v-form component multiple times across your application):

// In a TS file
export type VForm = Vue & { validate: () => boolean }

// In component, import `VForm`
computed: {
  form(): VForm {
    return this.$refs.form as VForm
  }
}

---

Explanation:

In the Vue template syntax, we can use the ref attribute on a Vue instance or a DOM element. If ref is used in a v-for loop, an array of Vue instances or DOM elements is retreived.

This is why this.$refs can either return Vue | Element | Vue[] | Element[].

In order for TypeScript to know which type is being used, we need to cast the value.

We can either do:

(this.$refs.form as Vue).validate() or (<Vue>this.$refs.form).validate()

We cast it to Vue because v-form is a Vue instance (component) and not an Element.

My personal preference is to create a computed property which returns the Vue instance(s) or DOM element(s) already casted.

ie.

computed: {
  form(): Vue {
    return this.$refs.form as Vue
  }
}

---

The v-form instance has a validate method that returns a boolean, so we need to use an intersection type literal:

computed: {
  form(): Vue & { validate: () => boolean } {
    return this.$refs.form as Vue & { validate: () => boolean }
  }
}

Then we can use it like so: this.form.validate()

---

A better solution would be to create a type with the intersection so that it can be reused across multiple components.

export type VForm = Vue & { validate: () => boolean }

Then import it in the component:

computed: {
  form(): VForm {
    return this.$refs.form as VForm
  }
}

这篇关于vue 中的打字稿 - 类型 'Vue | 中不存在属性'validate'元素 |Vue[] |元素[]'.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！