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

niknxzdl  于 2023-06-24  发布在  Vue.js
关注(0)|答案(6)|浏览(254)

我创建了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()函数可用。但是为什么这个错误会在建造的时候出现呢?

0pizxfdo

0pizxfdo1#

解决方案:

很简单:

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

Alternative (如果在组件中多次引用this.$refs.form,请使用此选项)

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

可重用 (如果您在应用程序中多次使用v-form组件,请使用此选项)

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

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

说明:

Vue模板语法中,我们可以在Vue示例或DOM元素上使用ref属性。如果在v-for循环中使用ref,则检索Vue示例或DOM元素的数组。
这就是为什么this.$refs可以返回Vue | Element | Vue[] | Element[]
为了让TypeScript知道使用的是哪个类型,我们需要强制转换值。
我们可以做:
(this.$refs.form as Vue).validate()(<Vue>this.$refs.form).validate()
我们将其强制转换为Vue,因为v-formVue示例(组件),而不是Element
我个人的偏好是创建一个计算属性,返回Vue示例或已经转换的DOM元素。
即。

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

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

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

我们可以这样使用它:this.form.validate()
更好的解决方案是创建一个具有交集的类型,以便它可以在多个组件中重用。

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

然后将其导入组件中:

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

dpiehjr42#

如果你使用vue-class-componentvue-property-decorator,你可以这样做:
types.ts中使用vuetify表单函数定义一个新类型:

export type VForm = Vue & {
  validate: () => boolean;
  resetValidation: () => boolean;
  reset: () => void;
};

然后导入组件:

import { VForm } from "types";
import { Component, Ref} from "vue-property-decorator";

在组件中使用@Ref定义表单:

export default class YourComponent extends Vue {
  @Ref("form") readonly form!: VForm;
}

所以在你的方法中,你可以这样使用它:

this.form.validate();
this.form.resetValidation();
this.form.reset();
bmp9r5qi

bmp9r5qi3#

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

zsohkypk4#

没有一个答案做到了。我试图得到验证,然后承诺工作的形式。
根据评论
如果你正在使用typescript构建你的vue组件

export default Vue.extend({})

然后做

import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
import Vue, { VueConstructor } from "vue";
export default (Vue as VueConstructor<
  Vue & {
    $refs: {
      form: InstanceType<typeof ValidationProvider>;
    };
  }
>).extend({
  methods: {
    saveEntity() {
      if (this.loading) return;
      console.log(this.entity);
      this.$refs.form.validate().then(success => {
        if (!success) {
          console.log("not valid");
          return;
        }
        console.log("valid");
      });
    }
  }
})

这就很好地验证了ValidationObserver ref=“form”。

njthzxwz

njthzxwz5#

不能评论接受的解决方案,因为我是新的StackOverflow,并希望提供我的解决方案。我采取了与OP相同的初始步骤进行调查,并执行了console.log(this.$ref.form),控制台上的输出实际上是[VueComponent]的数组,并且validate()函数在该上下文中不存在。
我可以通过执行this.$ref.form[0].validate()来访问表单上的validate()函数

3j86kqsm

3j86kqsm6#

对于带有Typescript的vue 3,以下内容对我很有效:

<script setup lang="ts">
import { VForm } from 'vuetify/components'
import { ref } from 'vue';

const form = ref(VForm); // here I just put the type of the form. 

const logUser = async () => {
  const { valid } = await form.value.validate()
  console.log("The form is:", valid);
}
</script>

相关问题