vue.js - Vue/Vuelidate：根据requiredIf动态显示需要的星号（*）

Question

我正在创建一个动态可重用的 vue 组件，它包含文本输入并包含 vuelidate 验证样式等：

<template>
  <div class="form-group" :class="{'form-group--error': validator.$error}">
    <label>{{ label }}<span v-if="validator.$params.required">*</span></label>
    <input type="text v-model="validator.$model" />
    <div class="error" v-if="validator.$error && !validator.required">* This field is required</div>
  </div>
<template>

<script>
export default {
  name: "FormTextField",
  props: ["validator", "label"]
}
</script>

（验证器道具$v来自父母）

我遇到的问题是尝试<span>*</span>根据字段是否需要动态显示。v-if="validator.$params.required"只要我只指定required验证器，这目前有效（ ）：

fieldName: {
  required: required
}

现在，我需要像这样声明我的验证：

fieldName: {
  required: requiredIf( ... )
}

问题是如何访问requiredIf函数的结果？validator.$params.required将永远是真的，因为它只是检查参数是否在那里。并且validator.required是验证的状态，而不是 requiredIf 调用的结果，以查看它是否应该是必需的。

关于如何根据 vuelidate 状态动态显示所需星的任何建议？

标签： vue.jsvuejs2vuelidate

Answer 1

而不是validator.$params.required, check validator.required，它仅在应用requiredorrequiredIf验证器规则时定义。的值validator.required是true当字段丢失时，false否则。

当该字段是可选的（没有required/requiredIf规则）时，该validator.required属性不存在，所以我们不能使用v-if="!validator.required". 相反，明确validator.require比较false：

<label>{{ label }}<span v-if="validator.required === false">*</span></label>
<div class="error" v-if="validator.$error && validator.required === false">* This field is required</div>

演示