Vue JS - 提交时显示复选框验证错误

Question

在我的注册表单中，我有一个复选框，用于确认用户是否接受了条款和条件。一旦我点击提交按钮，该复选框应该会验证，但是由于该复选框最初未被选中，因此验证错误会立即显示出来。最终，一旦我勾选复选框，错误就会反应性消失，但对于这种特殊情况，我希望只有在我点击提交后才会显示验证错误（如果我没有选中它）。我没有收到任何特定的控制台错误，但我只是卡在执行上。谁能告诉我如何实现这一目标？如有任何帮助，我将不胜感激！

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>

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>
  const termsPrivacyErrorText = "checkmark is not checked";

  data: () => ({
    termsPrivacyError: '',
  }),

  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>

Answer 1

我创建了您的组件的简化版本，以演示如何实现所需的功能。

CheckboxAccept.vue

<template>
  <div class="checkbox-accept">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" v-model="accepted" @change="processAccept" id="checkbox1">
      <label class="form-check-label" for="checkbox1">
        Accept terms
      </label>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        accepted: false
      }
    },
    methods: {
      processAccept() {
        this.$emit('terms-accepted-event', this.accepted)
      }
    }
  }
</script>

注册.vue

<template>
  <div class="register">
    <h4>Register</h4>
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitForm">
          <checkbox-accept @terms-accepted-event="processCheckboxAccept" />
          <button type="submit" class="btn btn-secondary">Submit</button>
          <span v-if="displayWarning" class="warning">Please accept terms</span>
        </form>
      </div>
    </div>
    <h5 v-if="displaySuccess">Registration succeeded!</h5>
  </div>
</template>

<script>
  import CheckboxAccept from './CheckboxAccept';

  export default {
    components: {
      CheckboxAccept
    },
    data() {
      return {
        termsAccepted: false,
        displayWarning: false,
        displaySuccess: false
      }
    },
    methods: {
      processCheckboxAccept(accepted) {
        this.termsAccepted = accepted;
        this.displayWarning = false;
      },
      submitForm() {
        if (!this.termsAccepted) {
          this.displayWarning = true;
        }
        else {
          this.displaySuccess = true;
        }
      }
    }
  }
</script>

<style scoped>
  .warning {
    color: red;
    margin-left: 1rem;
  }
</style>