我目前正在使用 Nuxt.js (Vue.js) 开发一个网站，并且我的自定义警报组件遇到问题。
我在我的网站上创建了一个联系表单，当用户输入错误数据或未输入所有必需数据时，该表单会触发自定义通知。但是，如果相同的错误被触发两次（例如错误的电话号码）。警报不会再次显示。
我已经尝试修复这个问题两天了，ChatGPT 也无法帮助我。所以我真的希望你们中的一个人知道为什么会发生这种情况。
我的自定义WarningAlert组件：
<!-- WarningAlert.vue -->
<template>
<div v-if="show" class="overlay">
<div class="alert alert-warning" role="alert">
<div class="container">
<div class="alert-icon">
<i class="now-ui-icons ui-1_bell-53"></i>
</div>
<strong>{{ strongText }}</strong> {{ message }}
<button v-if="dismissible" type="button" class="close" @click="hideOverlay" aria-label="Close">
<span aria-hidden="true">
<i class="now-ui-icons ui-1_simple-remove"></i>
</span>
</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
message: String,
type: String,
strongText: String,
dismissible: Boolean,
},
data() {
return {
show: false,
};
},
methods: {
hideOverlay() {
this.show = false;
},
showWarningAlert(message) {
// Show the warning alert with the provided message
this.message = message;
this.show = true;
// Hide the warning alert after 5 seconds (5000 milliseconds)
setTimeout(() => {
this.hideOverlay();
}, 5000);
},
hideWarningAlert() {
// Dismiss the warning alert
this.show = false;
this.message = '';
},
},
watch: {
message() {
// sets show true, after an update
this.show = true;
setTimeout(() => {
// delayed hiding 5000 Millisekunden (5 Seconds)
this.hideOverlay();
}, 5000);
},
},
mounted() {
this.showWarningAlert(this.message);
},
};
</script>
<style scoped>
.overlay {
position: fixed;
top: 50px;
left: 0;
width: 100%;
z-index: 1000;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
}
.alert {
width: 70%;
}
</style>
这是联系表格和导入的组件：
<!-- Alert component -->
<WarningAlert v-if="showWarningAlert" :message="warningMessage" :type="'warning'" :strongText="'Warning!'"
:dismissible="true" @dismiss="dismissWarningAlert"></WarningAlert>
<!-- Contact Form -->
<div class="main">
<div class="contact-content">
<div class="container">
<div class="row">
<div class="col-md-5 ml-auto mr-auto">
<h2 class="title">Senden Sie uns eine Nachricht</h2>
<p class="description">Wir stehen Ihnen gerne zur Verfügung. Wir werden Ihnen innerhalb eines Werktages
antworten.
<br>
<br>
</p>
<form role="form" id="contact-form" @submit.prevent="submitForm" method="post">
<label>Ihr Name</label>
<fg-input required placeholder="Name..." v-model="form.firstName"
addon-left-icon="now-ui-icons users_circle-08"></fg-input>
<label>Email Adresse</label>
<fg-input required placeholder="Email..." v-model="form.email"
addon-left-icon="now-ui-icons users_circle-08" title="Please enter a valid email address"></fg-input>
<label>Telefon</label>
<fg-input required placeholder="Telefonnummer..." v-model="form.phone"
addon-left-icon="now-ui-icons tech_mobile"></fg-input>
<div class="form-group">
<label>Ihre Nachricht</label>
<textarea name="message" class="form-control" id="message" placehiolder="Nachricht..." v-model="form.message" rows="6"></textarea>
</div>
<div class="submit text-center">
<button class="btn btn-success btn-rounded" type="submit" round>Senden</button>
</div>
</form>
最后是我的 SubmitForm() 方法的 CSS ，错误可能就在其中（因为此处触发了通知）。
methods: {
async submitForm() {
// Initialisation
this.showWarningAlert = false;
this.warningMessage = '';
// Check if all relevant fields filled out
if (!this.form.firstName || !this.form.email || !this.form.phone) {
this.showWarningAlert = true;
this.warningMessage = 'Please fill out all required fields (Name, Email, Phone).';
return;
}
const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (!this.form.email.match(emailRegex)) {
this.showWarningAlert = true;
this.warningMessage = 'Please enter a valid email address.';
return;
}
const phoneRegex = /^(\+\d{1,3})?\d{1,14}$/;
if (!this.form.phone.match(phoneRegex)) {
this.showWarningAlert = true;
this.warningMessage = 'Please enter a valid phone number.';
return;
}
// Send formulas if everything is validated
try {
const response = await axios.post('http://localhost:3005/send-email', this.form);
if (response.status === 200) {
console.log('Email sent successfully');
}
} catch (error) {
console.error('Error sending email:', error);
// Show warning if error
this.showWarningAlert = true;
this.warningMessage = 'Something went wrong. Please contact us via email.';
} finally {
// Reset Warning properties before leaving the method
this.showWarningAlert = false;
this.warningMessage = '';
}
},
dismissWarningAlert() {
// Dismiss the warning alert
this.showWarningAlert = false;
this.warningMessage = '';
}
},
在我看来，只需在代码中移动一些东西就可以让自己省去一些麻烦。
对我来说最突出的第一件事是，您将警报的切换状态存储在两个不同的位置 - 警报组件本身（如
this.showthis.showWarningAlert） this.showWarningAlertthis.showWarningAlertthis.showWarningAlert您的警报组件似乎还缺少一个名为“dismiss”的发出，根据您的代码，该发出应该触发您的missWarningAlert 方法。我会将所有切换警报可见性的方法移至父组件（在存储切换状态
this.showWarningAlerttrue我还注意到，在将字符串作为道具传递给警报组件时，您使用了混合引号。您可以将
:typestrongTexttype="warning" strongText="Warning!"