Vue должен отправлять почту только в том случае, если решена повторная проверка и пользователь установил флажок

Question

Я создаю SPA на основе VueJs. Я хотел бы добавить простой, если государство. Если флажок пользователя и повторная проверка решены корректно, Vue отправил письмо. Это работает. Но если флажок не был установлен до нажатия кнопки «Отправить», пользователь больше не сможет отправлять почту до перезагрузки страницы, даже если пользователь установил флажок, как его просили.

Я пытался делать заявления и переключаться. Возможно проблема в Vue Recaptcha или в том, что это метод.

    <template>
        <b-row>
        <b-col cols=12 xl=6>
          <h2 class="display-1">Contact Form</h2>
          <label>Name</label>
          <div class="form-group">
          <b-form-input v-model="user_name" placeholder="Provide name"></b-form-input>
          <label class="pt-3">Mail</label>
          <b-form-input v-model="user_reply" placeholder="Provide mail"></b-form-input>
          <label class="pt-3">Message</label>
          <textarea v-model="user_message" rows="3" placeholder="message" class="form-control"></textarea>
          </div>
          <b-form-checkbox
              id="checkbox-1"
              v-model="selected"
              name="checkbox-1"
              value="true"
              unchecked-value="false"
        >
         I accept <router-link class="text-white" to="/privacy"><b>the privacy policy</b></router-link>
        </b-form-checkbox>
          <b-row>
            <b-col cols=6 xl=3 class="pt-3">
              <vue-recaptcha
              ref="recaptcha"
              @verify="onVerify"
              @expired="onExpired"
              :sitekey="sitekey">
               <button class="btn-primary">Sent message</button>
          </vue-recaptcha>
            </b-col>
          </b-row>
      {{selected}}
          <p v-if="message_status == 'error'" class="text-danger">Error during sending</p>
          <p v-if="message_status == 'success'" class="text-success">Message was send correctly</p>
          <p v-if="message_status == 'error_check'" class="text-danger">You have to accept privacy.</p>

        </b-col>
        </b-row>
    </template>

    <script>
    import VueRecaptcha from 'vue-recaptcha';

    export default {
      name: 'contact',
      components: { VueRecaptcha },
      data() {
        return{
          sitekey: 'RECAPTCHA KEY HERE',
          user_name: '',
          user_reply: '',
          user_message: '',
          message_status: '',
          selected: 'false',
        }
      },
      methods: {
        sendMail() {
          var service_id = 'gmail';
          var template_id = 'template_ZZsyPIab';
          var template_params = {
              to_name: this.user_name,
              from_name: this.user_reply,
            message_html: this.user_message
            };
          emailjs.send(service_id,template_id,template_params);
        },
        onSubmit() {
               this.$refs.invisibleRecaptcha.execute();
        },
        onVerify(response) {
          console.log('Verify: ' + response)
          switch (this.selected) {
              case 'true':
                  var service_id = 'gmail';
                  var template_id = 'template_ZZsyPIab';
                  var template_params = {
                    to_name: this.user_name,
                    from_name: this.user_reply,
                    message_html: this.user_message
                    };
                    emailjs.send(service_id,template_id,template_params)
                      .then(() => {
                        this.message_status = 'success';
                      }, function(err) {
                      this.message_status = 'error';
                    });
                break;
              case 'false':
                this.message_status = 'error_check';
                break;
              default:
                this.message_status = 'error_check';
            }

        },
        onExpired: function () {
          console.log('Expired')
        },
      },
    }
    </script>

    <style lang="scss" scoped>
    ...
    </style>

Answer 1

Проблема решена.Может быть, в будущем это кому-нибудь пригодится.

    <template>
    <b-row>
    <b-col cols=12 xl=6>
          <h2 class="display-1">Formularz Kontaktowy</h2>
          <label>Twoje imię:</label>
          <div class="form-group">
          <b-form-input v-model="user_name" placeholder="Podaj swoje imię"></b-form-input>
          <label class="pt-3">Twój e-mail:</label>
          <b-form-input v-model="user_reply" placeholder="Podaj mail"></b-form-input>
          <label class="pt-3">Śmiało napisz co Ci leży na duszy.</label>
          <textarea v-model="user_message" rows="3" placeholder="Wiadomość" class="form-control"></textarea>
          </div>
          <b-form-checkbox
              id="checkbox-1"
              v-model="selected"
              name="checkbox-1"
              value="true"
              unchecked-value="false"
        >
         Akceptuję <router-link class="text-white" to="/privacy"><b>Politykę prywatności</b></router-link>
        </b-form-checkbox>
          <b-row>
            <b-col cols=6 xl=3 class="pt-3">
              <vue-recaptcha
              ref="recaptcha"
              @verify="onVerify"
              @expired="onExpired"
              :sitekey="sitekey">
               <button v-on:click="sendMail" class="btn-primary">Wyślij</button>
          </vue-recaptcha>
            </b-col>
          </b-row>
          <p v-if="message_status == 'error'" class="text-danger">Wystąpił błąd w trakcie wysyłania.</p>
          <p v-if="message_status == 'success'" class="text-success">Wiadomość została wysłana prawidłowo</p>
          <p v-if="message_status == 'error_check'" class="text-danger">Musisz zaakceptować politykę prywatności.</p>
        {{recaptchaWork}}
        </b-col>
        </b-row>
    </template>

    <script>
    import VueRecaptcha from 'vue-recaptcha';

    export default {
      name: 'contact',
      components: { VueRecaptcha },
      data() {
        return{
          sitekey: 'SITEKEY RECAPTCHA',
          user_name: '',
          user_reply: '',
          user_message: '',
          message_status: '',
          selected: 'false',
          recaptchaWork: 'false',
        }
      },
      methods: {
         sendMail(){
          if (this.selected == 'false') {
            this.message_status = 'error_check';
          }
          if (this.recaptchaWork == 'true' && this.selected == 'true') {
              var service_id = 'gmail';
                  var template_id = 'template_ZZsyPIab';
                  var template_params = {
                    to_name: this.user_name,
                    from_name: this.user_reply,
                    message_html: this.user_message
                    };
                    emailjs.send(service_id,template_id,template_params)
                      .then(() => {
                        this.message_status = 'success';
                      }, function(err) {
                      this.message_status = 'error';
                    });
          }
        },
        onSubmit() {
               this.$refs.invisibleRecaptcha.execute();
        },
        onVerify(response) {
          console.log('Verify: ' + response)
          console.log(this.selected)
          this.recaptchaWork = 'true';
        },
        onExpired: function () {
          console.log('Expired')
        },
        resetRecaptcha () {
          this.$refs.recaptcha.reset() // Direct call reset method
        }
      },
    }
    </script>