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>
  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

首先，这不是一个优雅的解决方案，但它有效，我们使用一个computed值来控制是否应显示错误。我们在方法中更新它submit，并在单击复选框时取消它以进行演示。

new Vue({
  el: "#app",
  data: {
    termsState: false,
    validated: false
  },
  computed: {
    termsError() {
      return this.validated && !this.termsState
    }
  },
  methods: {
    handleTermsState() {
      this.validated = false
    },

    handleSubmit() {
      this.validated = true
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <label for="terms">
            Terms and Privacy Policy
            <input type="checkbox" id="terms" name="terms" v-model="termsState"  @change="handleTermsState">
            {{ termsState }}
        </label>
  <p style="color: red" class="for-error terms-error" v-if="termsError">You have to agree the terms and privacy condition.</p>
  <div><button type="submit" @click="handleSubmit">Submit</button></div>
</div>