2

我不知道如何为 vee-validate 分配多个规则。通常你管| v-validate 属性中的规则，但问题是我也尝试包含一种自定义方法。

<input id="number" type="tel" v-model="cardDetail.number" v-card-focus
       class="form__input"
       v-validate="'required'" <!-- need to add requireNumberIfCreditCard method -->
       data-vv-validate-on="blur"
       name="number" required>
<label for="number" class="form__label">
    {{ $root.trans.translate('cardNumber') }}
</label>
<p class="form__error" v-show="errors.has('number')">
    {{ errors.first('number') }}
</p>

这是我的 javascript

export default {
        data() {
            return {
                cardDetail: {
                    number: '',
                }
            }
        },
        computed: {
            requireNumberIfCreditCard() {
                if (this.paymentMethod === 'creditCard') {
                    return this.cardDetail.number ? "required" : "";
                }
            }
        }
    };

我的 HTML 应该是什么样子，这样我也可以将自定义方法添加到 vee-validate？如果您需要任何其他信息，请告诉我，我会提供。谢谢！

4

1 回答 1

1

该属性v-validate绑定到您的数据，因此您可以在其中使用任何您想要的内容。此外，它支持不同的语法 - 您正在使用的一种是字符串（即'required'）。 它支持的另一种形式是 object，这是您需要的：

<input id="number" type="tel" v-model="cardDetail.number" name="number"
       v-validate="{ required: (requireNumberIfCreditCard == 'required') }">

我建议您更改计算值以返回 true/false，在这种情况下您可以直接使用它。

工作示例：https ://codesandbox.io/s/km4lw12823

于 2018-07-09T21:45:18.997 回答