Vee-validate 在没有 EventBus 的情况下独立验证来自父级的组件

Question

我希望能够使用 Vee-validate 相互独立地验证表单中的所有组件（具有多个字段）。

我阅读了个主题。但是，这些解决方案同时验证了所有组件。我尝试过使用 EventBus（未成功），但我宁愿远离它。

我有一个多步骤表单，应该在单击 'continue' 之前验证当前步骤。示例：

-- Step 1
---- <component-one /> == component with fields 
---- (next button) <-- validate content 1. If valid, go to step 2
-- Step 2
---- <component-two /> == component with fields
---- (next button) <-- validate content 2. If valid, go to step 2
-- Step 3
---- <component-three/> == component with fields
---- (next button) <-- validate content 3. If valid, go to step 3

我的问题是我必须在组件级别调用 this.validator 才能验证组件。但是，继续按钮存在于父级别。我无法创建一个共享 $validator 因为所有步骤都必须有效才能继续（这是不可能的）/

Answer 1

Vee-validate 有 "scopes" 的概念，所以我认为诀窍是将 data-vv-scope="step1" 添加到 component-one 中的每个表单元素。然后，当您在步骤 1 "next" 按钮中进行验证时，您会执行 this.$validators.validateAll('step1').

如果每个组件都有自己的表单，您可以将 data-vv-scope 属性放在表单级别，它将应用于其中的所有元素。

详情见this example。

Vee-validate 在没有 EventBus 的情况下独立验证来自父级的组件

Vee-validate independently validate components from parent without EventBus

javascript

validation

vue.js

vee-validate