typescript - 使用 Vue 3 + vue-class-component + TypeScript 的 Vuelidate

Question

有人知道上述堆栈的任何工作示例吗？我知道 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()，但我无法弄清楚它是如何以及是否是错误的原因。感谢您的帮助。

Answer 1

在您的示例中，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 测试