VueJS勾选无项目起止日期复选框仍触发结束日期校验问题

核心问题根源 #

• 复选框仅用:checked做单向数据绑定，勾选状态无法同步到组件数据中，校验逻辑拿不到最新勾选状态
• 结束日期的校验规则是写死的静态值，没有根据复选框状态动态切换

具体实现步骤 #

• 第一步：修复复选框双向绑定
  把复选框上的单向:checked绑定替换为v-model，实现勾选状态和project.is_valid_forever的实时同步：

  <input
    type="checkbox"
    name="opt_in"
    ref="checkBox"
    v-model="project.is_valid_forever"
  >
  

• 第二步：替换静态校验规则为动态计算规则
  不要给校验组件传固定写死的规则，通过计算属性动态返回校验配置：勾选无起止日期时返回空规则跳过校验，未勾选时加载原有校验逻辑。

  // Options API 写法，组合式API同理用computed即可
  computed: {
    currentEndDateRules() {
      // 勾选无起止日期时，不加载任何校验规则
      if (this.project.is_valid_forever) return {}
      // 未勾选时返回原有校验规则，顺便修正原提示文案的笔误（原提示错写为Start date）
      return {
        required: {
          message: 'Project end date is required.'
        },
        dateIsNowOrLater: {
          message: 'Date must be a future date.'
        }
      }
    }
  }
  

  同步修改模板中校验组件的规则绑定：

  <validator
    :identifier="`${identifier}-validate-project`"
    :rules="currentEndDateRules"
    :name="`${identifier}-end_at`"
  />
  

• 第三步：（可选优化）勾选时清空已有值和报错提示
  给复选框加change事件，勾选时清空已选的结束日期，同时清除该字段残留的校验错误提示：

  <input
    type="checkbox"
    name="opt_in"
    ref="checkBox"
    v-model="project.is_valid_forever"
    @change="handleNoDateCheck"
  >
  

  对应事件方法：

  methods: {
    handleNoDateCheck() {
      if (this.project.is_valid_forever) {
        this.project.end_date = null
        // 调用你所用校验库的对应方法清除字段错误，以vee-validate为例：
        // this.$validator.clear(`${this.identifier}-end_at`)
      }
    }
  }
  

补充说明：如果需要优化交互，可以给cs-date-picker加:disabled="project.is_valid_forever"属性，勾选无日期时直接置灰日期选择器禁止操作。

内容的提问来源于stack exchange，提问作者Arctic Fox