vue中的Typescript - 类型'Vue |上不存在属性'validate'元素| Vue [] |元件[]'。

Question

我这样创造了v-form

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

脚本：

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

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

Answer 1

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

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

为了让TypeScript知道正在使用哪种类型，应该使用该值。

人们可以这样做：

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

我们把它投到Vue，因为v-form是Vue实例（组件）而不是Element。

我个人的偏好是创建一个计算属性，它返回已经铸造的Vue实例或DOM元素。

即。

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

然后就像这样使用它：this.form.validate()

Answer 2

let form: any = this.$refs.form
if(form.validate){}