我创建了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()函数可用。但是为什么这个错误会在建造的时候出现呢?
6条答案
按热度按时间0pizxfdo1#
解决方案:
很简单:
Alternative (如果在组件中多次引用
this.$refs.form
,请使用此选项):可重用 (如果您在应用程序中多次使用
v-form
组件,请使用此选项):说明:
在
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-form
是Vue
示例(组件),而不是Element
。我个人的偏好是创建一个计算属性,返回
Vue
示例或已经转换的DOM元素。即。
v-form
示例有一个validate
方法,它返回一个布尔值,所以我们需要使用一个交集类型的文字:我们可以这样使用它:
this.form.validate()
更好的解决方案是创建一个具有交集的类型,以便它可以在多个组件中重用。
然后将其导入组件中:
dpiehjr42#
如果你使用
vue-class-component
和vue-property-decorator
,你可以这样做:在
types.ts
中使用vuetify表单函数定义一个新类型:然后导入组件:
在组件中使用@Ref定义表单:
所以在你的方法中,你可以这样使用它:
bmp9r5qi3#
zsohkypk4#
没有一个答案做到了。我试图得到验证,然后承诺工作的形式。
根据评论
如果你正在使用typescript构建你的vue组件
然后做
这就很好地验证了ValidationObserver ref=“form”。
njthzxwz5#
不能评论接受的解决方案,因为我是新的StackOverflow,并希望提供我的解决方案。我采取了与OP相同的初始步骤进行调查,并执行了
console.log(this.$ref.form)
,控制台上的输出实际上是[VueComponent]的数组,并且validate()
函数在该上下文中不存在。我可以通过执行
this.$ref.form[0].validate()
来访问表单上的validate()
函数3j86kqsm6#
对于带有Typescript的vue 3,以下内容对我很有效: