如何使用 vee-validate 代码创建 fiddle？

Question

我尝试使用 ValidationObserver 使用 vee-validate 3.0 创建一个 fiddle，但我遇到了一个问题，试图添加行：

import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'
import {required, email, url} from 'vee-validate/dist/rules'

我在控制台中遇到错误：

Uncaught SyntaxError: Cannot use import statement outside a module

如何正确完成？

Answer 1

从 CDN 加载时不能使用 import。相反，所有内容都作为全局 VeeValidate 对象的属性公开。

例如ValidationObserver就是VeeValidate.ValidationObserver.

更改这些：

import {ValidationObserver, ValidationProvider, extend} from 'vee-validate'
import {required, email, url} from 'vee-validate/dist/rules'

为此：

const {ValidationObserver, ValidationProvider, extend} = VeeValidate
const {required, email, url} = VeeValidate.Rules

第一行现在应该可以工作，但第二行仍然会失败。要解决此问题，您还需要将 vee-validate URL 更改为 vee-validate.full.js 而不是 vee-validate.js。完整构建包括规则。

如果您想在 HTML 部分中指定一个模板，则适用关于 in-DOM 模板的常见注意事项。例如您需要对模板中的组件名称使用 kebab-case：<validation-observer>.

How to create a fiddle with vee-validate code?