Vue js vee 使用自定义组件验证密码确认答案

【问题标题】：Vue js vee validate password confirmation with custom componentsVue js vee 使用自定义组件验证密码确认
【发布时间】：2019-05-28 23:01:59
【问题描述】：

我在我的项目中使用vee-validate 自定义组件没有问题。

但现在对于密码确认输入字段，我无法使其正常工作。

我有用于输入字段的自定义组件，例如<base-input-field>。

如果我在我的自定义组件 (<base-input-field ref="password">) 中添加一个ref="password" 属性，它不会引用我的自定义组件内的<input>，而是封装<input> html 组件的<div> 包装器。

代码示例：

            <!-- Password -->
            <div class="row">
              <base-text-field
                ref="password"
                name="password"
                type="password"
                :error="isVisible && errors.first('password')"
                v-validate="{
                  required: true,
                  min: 6,
                  max: 30,
                }"
                v-model.trim="password"
                required
              />
            </div>

            <!-- Confirm Password -->
            <div class="row">
              <base-text-field
                name="password_conf"
                type="password"
                :error="isVisible && errors.first('password_conf')"
                v-validate="{
                  required: true,
                  confirmed: 'password',
                }"
                :data-vv-as="password"
                v-model.trim="password_conf"
                required
              />
            </div>

【问题讨论】：

this问题的答案会对你有所帮助。

标签： validation vue.js vuejs2 vee-validate

【解决方案1】：

我不知道vee-validate，但这是我在自定义组件无法直接访问<input> 时遇到的类似问题的一个想法：

使用 JS 获取输入的引用：

this.$refs.password.$el.querySelector("input")

我猜你可以将它保存在一个变量中并将它传递给你的组件。同样，我不知道vee-validate。希望能给你一些想法。

【讨论】：

我会试试的！谢谢！

【解决方案2】：

你能检查一下你的自定义组件支持哪些事件吗（可能是@input/@change）？

如果在更改输入时触发任何事件，则 v-validate 中有一个选项 data-vv-validate-on，您可以在其中设置要检查验证的事件。阅读更多here

<base-text-field
            ref="password"
            name="password"
            type="password"
            :error="isVisible && errors.first('password')"
            v-validate="{
              required: true,
              min: 6,
              max: 30,
            }"
            v-model.trim="password"
            data-vv-validate-on="change"
            required
          />

【讨论】：

【解决方案3】：

按照this page中的要求，你应该没问题：

当组件中的值发生变化时发出 input 事件
通过$_veeValidate 在组件中定义name 和value。或者，使用data-vv-name 和data-vv-value-path（详情here）。

由于您没有在 base-text-field 中提供代码，因此我无法再给您提供更多示例来说明它应该如何为您工作。

【讨论】：