Vuelidate 与 Vue 3 + vue-class-component + TypeScript

Posted 2023-02-23

【中文标题】Vuelidate 与 Vue 3 + vue-class-component + TypeScript

【英文标题】：Vuelidate with Vue 3 + vue-class-component + TypeScript

【发布时间】：2021-07-03 07:51:24

【问题描述】：

有人知道上述堆栈的任何工作示例吗？我知道 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 说我需要以某种方式通过规则和状态来使用Vuelidate()，但我不知道它是如何以及是否是错误的原因。任何帮助表示赞赏。

【参考方案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测试