Javascript Vuelidate requiredIf未使用复选框

如果启用了该功能（如果选中复选框），我将尝试创建一个必填字段。 但点击选择/取消选择复选框不会触发该验证

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

我取消选中复选框，静态图像字段会给出一个错误，该错误是

所需的

<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>

请参阅图
尝试将验证转换为功能

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

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

    return validations;
  }

使用指定的触发器更改“this.enabled”
数据对象中的窗体是什么样子的

基于您的v-model
form.banner.image
您将进入几个层次（vue不喜欢这一点，除非您使用cloneDeep之类的工具）。此外，最好将复选框输入绑定到您可以在状态中跟踪的内容中

比如：

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

然后尝试上面的代码，将“this.enabled”替换为“this.imageEnabled”，并将其v形建模到输入复选框中
我将添加到BRose响应中，这样我就不会在
数据
中使用这样的深层对象，即使它按照我们的预期工作

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

对于
验证
，作为一个函数，我认为没有必要。您可以将其保留为对象，只尝试将所需设置为函数。如您所见，其他人发现
要求如果
也不能像我们期望的那样工作。我试着做和你一样的事情：使用requiredIf检查一个值，并将属性设置为required或not。在没有使用
requiredIf
并将函数分配给
required
之后，我开始检查组件内部的属性
$v
，我相信我理解了它的行为

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

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

我错了！这不符合我的预期，因为
$v.form.banner.image
中的属性
required
是一个布尔值，它反映了是否满足输入条件以及我的函数是否不完整。因此，它不能只检查是否需要它，它必须检查所需的条件是否满足，即以下代码，假设此
数据
结构：

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
，因为我需要一个更加定制的验证。
它不起作用。同样的事情。甚至还增加了其他部分。但是没有luckMy数据对象-返回{form:{banner:{enabled:true，image:null，}，}，}，}，它在我使用和需要验证时工作：requiredIf（function（）{返回此值。$v.form.banner.enabled==“enabled”；}）当复选框没有布尔值但没有布尔值时，多级别的工作方式基于您向我展示的内容，我们真正要从代码中更改的唯一内容是：if（this.form.banner.enabled）{validations.form.banner.image={required}；}基本上，我们告诉vuelidate只有在启用为真时才需要此元素。如果您正在使用chrome，我强烈建议您下载vue devtools（如果您还没有），并检查您的状态，以确保启用正确触发，并且您的数据看起来应该如此。祝您好运！
data() {
  return {
    form: {
      banner: {
        enabled: true,
        image: '',
      }
    }
  }
},
validations: {
    form: {
        banner:{
            image:{
                required: function() {
                    return this.form.banner.enabled ? !!this.form.banner.image : true;
                },
            },
        },
    },
}