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>

您可以复制 - 删除图像的值并取消选中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一个功能我认为没有必要。您可以将其保留为对象，仅尝试将所需的设置为函数。正如您在这里所看到的，其他人也发现requiredIf它并不像我们期望的那样工作。我试图做与您相同的事情：使用 requiredIf 检查值并根据需要设置属性。在没有使用requiredIf和分配函数之后，我开始检查组件内部的required属性，我相信我理解它的行为方式。$v

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

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

我错了！这并不像我预期的那样工作，因为required中的属性$v.form.banner.image是一个布尔值，反映了输入条件是否满足并且我的函数不完整。所以它不能只检查是否应该需要，它必须检查是否满足所需的条件，就是下面的代码，假设这个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，因为我需要更加定制的验证。