Vuelidate 与 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()，但我无法确定它是如何以及是否是错误的原因。任何帮助表示赞赏。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）