我正在基于VueJ创建SPA。我想添加简单的if状态。如果从根本上解决了用户复选框和重新捕获问题，则Vue发送了邮件。这是工作。但是，如果在单击“发送按钮”之前未选中复选框，则即使重新询问页面，用户也无法发送邮件，即使用户被询问时也选中了该复选框。
我尝试制作if语句和switch。可能是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>
答案 0 :(得分：0)
问题解决了。也许将来对某人有用。
<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>