javascript - 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 作为函数，我认为没有必要。您可以将其保留为一个对象，只尝试将所需的设置为一个函数。如你所见here ，其他人发现 requiredIf 也不能像我们预期的那样工作。我试图和你做同样的事情:使用 requiredIf 检查一个值并根据需要设置属性。在不使用 requiredIf 并将函数分配给 required 之后，我开始检查组件内的属性 $v 我相信我了解它的行为方式。

最初我认为下面的代码就足够了:

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

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