1

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

 <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

参考图片在此处输入图像描述

4

3 回答 3

5

我将添加到 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，因为我需要更定制的验证。

于 2020-08-31T17:40:03.907 回答
0

尝试将验证转换为函数

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

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

    return validations;
  }

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

于 2019-11-25T20:20:34.343 回答
0

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

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

就像是：

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

然后尝试上面的代码并将'this.enabled'替换为'this.imageEnabled'并将其v建模为输入复选框

于 2019-11-25T21:30:11.577 回答