Javascript Vue JS-提交时出现复选框验证错误

在我的注册表中，我有一个复选框，用于确认用户是否接受条款和条件。当我点击提交按钮时，复选框应该进行验证，但是由于复选框最初未选中，验证错误会立即显示。最后，当我勾选复选框时，错误会反应性地消失，但是对于这个特定的场景，我希望只有在我点击submit（如果我没有勾选它）之后才会显示验证错误。我没有收到任何特定的控制台错误，但我只是在执行时卡住了。有人能告诉我如何做到这一点吗？我将感谢任何帮助

Checkbox.vue-这是表示复选框的组件

<template>
  <div class="check-wrapper">
    <label :for="id" class="check-label">
      <input v-model="checkboxValue"
             :id="id"
             :checked="isCheckboxChecked"
             :oninput="checkCheckbox()"
             type="checkbox"
             name="newsletter"/>
      <span v-if="labelText && !isLabelHtmlText">{{ labelText }}</span>
      <span v-if="labelText && isLabelHtmlText" class="label-html" v-html="labelText"></span>
      <span :class="{'check-mark-error': checkboxError}" class="check-mark"></span>
    </label>
    <p v-if="checkboxError" class="checkbox-error text-error">{{checkboxError}}</p>
  </div>
</template>

<script>
  data: () => ({
    checkboxValue: false
  }),
  methods: {
    updateValue: function () {
      if (this.$props.callback) {
        this.$props.callback(this.$props.id, this.$props.checkboxData, this.checkboxValue);
      }
    },
    checkCheckbox: function () {
      this.updateValue();
    }
  }
</script>

{{labelText}}
{{{checkboxError}
数据：（）=>({
checkboxValue:false
}),
方法：{
updateValue:函数（）{
如果（此$props.callback）{
this.$props.callback（this.$props.id，this.$props.checkboxData，this.checkboxValue）；
}
},
复选框：函数（）{
this.updateValue（）；
}
}

Register.vue-这是进行注册的父组件

<template>
   <BasicCheckbox :id="'terms-privacy'"
                  :callback="onTermsClick"
                  :label-text="'terms and conditions'"
                  :is-label-html-text="true"
                  :checkbox-error="termsPrivacyError"
                  class="terms-privacy"/>
</template>
<script>
  methods: {
    validateData: function (data) {
      if (!this.termsPrivacyError) {
        this.sendRegistration(data).then(response => {
          if (response) {
            console.log('Registration successful');
            this.loginUser({email: data.email, password: data.password}).then(response => {
              if (response) {
                console.log('User logged in!');
                this.$router.push({name: ROUTE_NAMES_HOME.HOME});
              }
            })
          }
        });
      }
    },

    // Terms and Privacy Checkbox
    onTermsClick: function (checkboxId, checkboxData, data) {
      this.termsPrivacyError = !data ? termsPrivacyErrorText : '';
    },
  }
</script>

方法：{
validateData:函数（数据）{
如果（！this.termsPrivacyError）{
这个.sendRegistration（数据）.then（响应=>{
如果（答复）{
console.log（“注册成功”）；
this.loginUser（{email:data.email，password:data.password}）。然后（response=>{
如果（答复）{
log（'用户登录！'）；
这个.$router.push（{name:ROUTE\u NAMES\u HOME.HOME}）；
}
})
}
});
}
},
//条款和隐私复选框
onTermsClick：函数（checkboxId、checkboxData、data）{
this.termsPrivacyError=！数据？termsPrivacyErrorText:“”；
},
}

首先，这不是一个优雅的解决方案，但它是有效的，我们使用一个

计算的

值来控制是否应该显示错误。我们在

submit

方法中更新它，并在出于演示目的单击它复选框时取消它

newvue({
el:“应用程序”，
数据：{
术语状态：错误，
已验证：false
},
计算：{
termsError（）{
返回this.validated&！this.termsState
}
},
方法：{
handleTermsState（）{
此值为0=false
},
handleSubmit（）{
this.validated=true
}
}
})

条款及私隐政策
{{termsState}}
您必须同意条款和隐私条件
提交

根据您的场景，据我所知，当用户未检查隐私和策略时，验证不会发生。如果用户勾选并取消勾选复选框，则验证正在工作

如果是这种情况，您可以检查子组件“Checkbox.vue”数据属性“checkboxValue”值，因为默认值已经为false，如果用户执行了操作并勾选了复选框，则为true。在提交表单之前，添加

checkboxValue

条件检查

这里是更新的

Register.vue

组件文件：

<template>
  <BasicCheckbox
    :id="'terms-privacy'"
    :callback="onTermsClick"
    :label-text="'terms and conditions'"
    :is-label-html-text="true"
    ref="BasicCheckbox"
    :checkbox-error="termsPrivacyError"
    class="terms-privacy"
  />
</template>
<script>
methods: {
  validateData: function (data) {
    if (!this.termsPrivacyError && this.$refs.BasicCheckbox.checkboxValue) {
      this.sendRegistration(data).then(response => {
        if (response) {
          console.log('Registration successful');
          this.loginUser({email: data.email, password: data.password}).then(response => {
            if (response) {
              console.log('User logged in!');
              this.$router.push({name: ROUTE_NAMES_HOME.HOME});
            }
          })
        }
      });
    }
  },

  // Terms and Privacy Checkbox
  onTermsClick: function (checkboxId, checkboxData, data) {
    this.termsPrivacyError = !data ? termsPrivacyErrorText : '';
  },
}
</script>

为了验证，我只添加了ref组件'BasicCheckbox'是否有'true'值的条件：

if (!this.termsPrivacyError && this.$refs.BasicCheckbox.checkboxValue)

if (!this.termsPrivacyError && this.$refs.BasicCheckbox.checkboxValue)