[英]Vuelidate with Vue 3 + vue-class-component + TypeScript
Does anyone know any working example with the mentioned stack?有谁知道上述堆栈的任何工作示例? I know Vuelidate is still alpha when it comes to Vue 3, but my guess is if it works with Composition API, then there should be a workaround to make it work with classes.我知道 Vuelidate 在 Vue 3 中仍然是 alpha 版本,但我的猜测是,如果它适用于 Composition API,那么应该有一种解决方法让它适用于类。
I'm trying the following simple example:我正在尝试以下简单示例:
<template>
<input
v-model="v$.login.$model"
:class="{ wrongInput: v$.login.$errors.lenght }"
placeholder="Login"
/>
</template>
<script lang="ts">
import { Vue } from 'vue-class-component';
import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators';
export default class LoginForm extends Vue {
login = '';
v$ = useVuelidate();
validations() {
return {
login: {
required,
},
};
}
}
</script>
And the error is:错误是:
Uncaught (in promise) TypeError: _ctx.v$.login is undefined
The docs says I somehow need to pass rules and state to useVuelidate(), but I can't figure how and whether it is the reason for the error. 文档说我需要以某种方式通过规则和 state 才能使用 Vuelidate(),但我不知道它是如何以及是否是错误的原因。 Any help is appreciated.任何帮助表示赞赏。
In your example, validations
is a component method, but Vuelidate expects it as a component option.在您的示例中, validations
是一种组件方法,但 Vuelidate 期望它作为组件选项。
The fix is to move validations
into @Options
:解决方法是将validations
移至@Options
:
import { Vue, Options } from 'vue-class-component';
import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators'
@Options({
👉validations: {
login: { required }
}
})
export default class LoginForm extends Vue {
login = '';
v$ = useVuelidate();
}
Tested with @vuelidate/core@2.0.0-alpha.15
使用@vuelidate/core@2.0.0-alpha.15
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.