与 Vue 3 一起使用时出现 Vuelidate TypeError

Question

我尝试将 Vuelidate 与 Vue 3 结合使用。当我尝试向组件添加一些验证器时，出现以下错误:

index.js?1dce:614 Uncaught (in promise) TypeError: Cannot read property 'super' of undefined

我相信这与我在 Vue 实例中使用 Vuelidate 的方式有关。这是我的 main.js 文件:

import { createApp } from 'vue';
import App from './App.vue';
import Vuelidate from 'vuelidate';

const app = createApp(App);
app.use(Vuelidate);
app.mount('#app');

我还将包含组件代码:

<template>
  <div id="signup">
    <div class="signup-form">
      <form>
        <div class="input">
          <label for="email">Mail</label>
          <input
                  type="email"
                  id="email"
                  @input="$v.email.$touch()"
                  v-model="email">
                  <div>{{ $v }}</div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import { required, email } from 'vuelidate/lib/validators'

  export default {
    data () {
      return {
        email: '',
      }
    },
    validations: {
      email: {
        required: required,
        email: email
      }
    }
    }
  }
</script>

有人知道如何解决这个问题吗？如果 Vue 3 与 Vuelidate 不兼容，有人可以推荐和替代吗？

谢谢

Answer 1

从您的示例来看，您似乎正在使用 Vuelidate for Vue 2。Vuelidate for Vue 3 处于 alpha 版本(截至 2020 年 9 月 30 日撰写本文时)，但您仍然可以使用它。只需安装以下库即可。

npm install @vuelidate/core @vuelidate/validators
# or 
yarn add @vuelidate/core @vuelidate/validators

您仍然可以使用示例中使用的选项 API 方法，或者转向组合 API 方法。

import { ref } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required, email } from '@vuelidate/validators'

export default {
  setup () {
    const email = ref('')
    const rules = {
      email: { required, email }
    }

    const $v = useVuelidate(rules, { email })

    return { email, $v }
  }
}

我自己没有尝试过，但希望这对你有帮助。

在其投入生产之前，您可以通过以下链接找到更多信息:

• Github 存储库:https://github.com/vuelidate/vuelidate/tree/next
• vuelidate@next doco:https://vuelidate-next.netlify.app/

编辑:我忘了提及，如果您继续使用 Options API 方法，您需要将 main.js 中的导入语句更改为以下内容:

import { createApp } from 'vue'
import App from './App.vue'
import { VuelidatePlugin } from '@vuelidate/core'

const app = createApp(App)
app.use(VuelidatePlugin)
app.mount('#app')