Vuelidate requiredIf 不使用复选框

Question

如果启用了功能（如果您选择复选框），我正在尝试填写必填字段。 但是该验证不会通过单击选择/取消选择复选框来触发

 <b-form-checkbox v-model="form.banner.enabled">
     <span class="label-title control-label">Enable</span>
 </b-form-checkbox>

Vue js

validations: {
    form: {
        banner:{
            image:{
                required: requiredIf(function() {
                    console.log("Image validator called")
                    return this.form.banner.enabled;
                })
            }
        }
    },
  },

我取消选中复选框，静止图像字段给出Its required 的错误

<b-form-input id="bannerImage" name="bannerImage" v-model="form.banner.image" :state="$v.form.banner.image.$dirty ? !$v.form.banner.image.$error : null"></b-form-input>
<b-form-invalid-feedback >
     <span >The image field is required.</span>
</b-form-invalid-feedback>

您可以复制 - 删除 image 的值并取消选中 enabled 选项并单击保存。它将给出错误The image field is required.，因为验证器没有调用提交。提交代码是

this.$v.form.$touch()
if (this.$v.form.$anyError) {
     return; //return if any error
}
//execute save form code if no error

参考图片

Answer 1

我将添加到 Brose 响应中，即我不会在 data 中使用如此深层次的对象，即使它应该像我们预期的那样工作。

将validations 作为一个函数我认为没有必要。您可以将其保留为对象，仅尝试将所需的设置为函数。正如您所看到的here，其他人发现requiredIf 也无法像我们预期的那样工作。我试图做和你一样的事情：使用 requiredIf 检查一个值并根据需要设置属性。在不使用requiredIf 并将函数分配给required 之后，我开始检查组件内部的属性$v，我相信我理解它的行为方式。

最初我认为以下代码就足够了：

validations: {
    form: {
        banner:{
            image:{
                required: function() {
                    return this.form.banner.enabled;
                },
            },
        },
    },
}

我错了！这不像我预期的那样工作，因为$v.form.banner.image 中的属性required 是一个布尔值，它反映是否满足输入条件并且我的函数不完整。所以它不能只检查它是否应该被要求，它必须检查是否满足要求的条件，即以下代码，假设这个data结构：

data() {
  return {
    form: {
      banner: {
        enabled: true,
        image: '',
      }
    }
  }
},
validations: {
    form: {
        banner:{
            image:{
                required: function() {
                    return this.form.banner.enabled ? !!this.form.banner.image : true;
                },
            },
        },
    },
}

这将检查内容是否需要以及是否存在，如果不需要则返回true，因为满足要求。

经过一番挣扎后，我没有使用 requiredIf 就得出了这个结论，因为我需要更自定义的验证。

Answer 2

尝试将验证转换为函数

validations() {
    const validations = {
       form: {
         banner:{
           image:{}
         }
       }
    };

    if (this.enabled) {
      validations.form.banner.image = {
        required
      };
    }

    return validations;
  }

使用您指定的触发器更改“this.enabled”

Answer 3

您的数据对象中的表单是什么样的？

根据您的 v-model form.banner.image，您将深入几个级别（除非您使用的是 cloneDeep 之类的东西，否则 vue 不喜欢这个）。此外，最好将复选框输入绑定到您可以在状态中跟踪的内容。

类似：

data() {
    return {
      imageEnabled: false,
    };
  }

然后尝试上面的代码并将“this.enabled”替换为“this.imageEnabled”，并将其 v-modeled 到输入复选框