使用 Vue 3 + vue-class-component + TypeScript 的 Vuelidate
Vuelidate with Vue 3 + vue-class-component + TypeScript
有人知道上述堆栈的任何工作示例吗?我知道 Vuelidate 在 Vue 3 方面仍然处于 alpha 阶段,但我的猜测是如果它与 Composition API 一起使用,那么应该有一个解决方法使其与 类.
一起使用
我正在尝试以下简单示例:
<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>
错误是:
Uncaught (in promise) TypeError: _ctx.v$.login is undefined
docs 说我需要以某种方式将规则和状态传递给 useVuelidate(),但我无法弄清楚它是如何以及是否是错误的原因。感谢任何帮助。
在您的示例中,validations
是一个组件方法,但 Vuelidate 期望它是一个组件选项。
解决方法是将 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();
}
测试 @vuelidate/core@2.0.0-alpha.15
有人知道上述堆栈的任何工作示例吗?我知道 Vuelidate 在 Vue 3 方面仍然处于 alpha 阶段,但我的猜测是如果它与 Composition API 一起使用,那么应该有一个解决方法使其与 类.
一起使用我正在尝试以下简单示例:
<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>
错误是:
Uncaught (in promise) TypeError: _ctx.v$.login is undefined
docs 说我需要以某种方式将规则和状态传递给 useVuelidate(),但我无法弄清楚它是如何以及是否是错误的原因。感谢任何帮助。
在您的示例中,validations
是一个组件方法,但 Vuelidate 期望它是一个组件选项。
解决方法是将 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();
}
测试 @vuelidate/core@2.0.0-alpha.15