如何解决成功将数据插入数据库后如何使用 vuetify 显示成功警报
我创建了一个包含输入字段、单选按钮等的 web 应用程序。底部有一个提交按钮，可在验证后将数据插入数据库（检查所有必填字段是否包含数据）。如果验证不成功，它会显示错误警报（使用 vuetify --> v-alert）。现在，如果成功，网站会快速重新加载，但不会显示成功消息。
编辑：此外，一旦错误警报弹出，即使验证成功，它也会保持打开状态并阻止您提交。
代码：
<template>
<v-container v-if="this.$store.state.loggedIn">
<panel title="Ereignisprotokoll">
<!-- Input fields for the teacher -->
<v-layout align-center justify-space-around row fill-height>
<v-flex xs12 sm5>
<v-flex xs12 sm5 text-left>
<h2> Lehrperson</h2>
</v-flex>
</v-flex>
<v-flex xs12 sm5>
<v-text-field label="Kürzel*" v-model="data['short_teacher']" :rules="[v => !!v || 'Kürzel wird benötigt']" required>
</v-text-field>
</v-flex>
<v-flex xs12 sm5>
<v-text-field label="Vorname*" v-model="data['first_teacher']" :rules="[v => !!v || 'Vorname wird benötigt']" required>
</v-text-field>
</v-flex>
<v-flex xs12 sm5>
<v-text-field label="Nachname*" v-model="data['last_teacher']" :rules="[v => !!v || 'Nachname wird benötigt']" required>
</v-text-field>
</v-flex>
<v-flex xs12 sm5>
</v-flex>
<v-flex xs12 sm5>
</v-flex>
</v-layout>
<!-- Input fields for the student -->
<v-layout align-center justify-space-around row fill-height>
<v-flex xs12 sm5>
<v-flex xs12 sm5 text-left>
<h2> Lernender</h2>
</v-flex>
</v-flex>
<v-flex xs12 sm5>
<v-text-field label="Kürzel*" v-model="data['short_student']" :rules="[v => !!v || 'Kürzel wird benötigt']" required>
</v-text-field>
</v-flex>
<v-flex xs12 sm5>
<v-text-field label="Vorname*" v-model="data['first_student']" :rules="[v => !!v || 'Vorname wird benötigt']" required>
</v-text-field>
</v-flex>
<v-flex xs12 sm5>
<v-text-field label="Nachname*" v-model="data['last_student']" :rules="[v => !!v || 'Nachname wird benötigt']" required>
</v-text-field>
</v-flex>
<v-flex xs12 sm5>
<v-select label="Klasse*" :items="['inf16','inf17','inf18','inf19','inf20']" v-model="data['Class_student']" :rules="[v => !!v || 'Klasse wird benötigt']" required>
</v-select>
</v-flex>
<v-flex xs12 sm5>
<v-text-field label="E-Mail*" v-model="data['mail_student']" :rules="[
(v) => !!v || 'E-mail wird benötigt',(v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail nicht gültig'
]" required>
</v-text-field>
</v-flex>
</v-layout>
<!-- Radio Buttons for the reason (Verfehlung) -->
<v-layout align-center>
<v-container grid-list-xs>
<v-flex xs12 sm5>
<v-flex xs12 sm5>
<v-flex xs12 sm5 text-left>
<h2>Verfehlung*</h2>
</v-flex>
</v-flex>
</v-flex>
<v-flex no-gutters>
<v-flex xs12>
<v-radio-group v-model="data['reason_id']" column :rules="[v => !!v || 'Grund für Verfehlung wird benötigt']">
<v-radio label="Unpünktlichkeit" value="Unpünktlichkeit"></v-radio>
<v-radio label="Abmeldung nicht gemäss Reglement" value="Abmeldung nicht gemäss Reglement"></v-radio>
<v-radio label="Unvollständige oder fehlende Aufgaben bzw. Arbeiten" value="Unvollständige oder fehlende Aufgaben bzw. Arbeiten"></v-radio>
<v-radio label="Fehlendes Schul- oder Arbeitsmaterial" value="Fehlendes Schul- oder Arbeitsmaterial"></v-radio>
<v-radio label="PC unterrichtsfremd eingesetzt" value="PC unterrichtsfremd eingesetzt"></v-radio>
<v-radio label="Verletzung IT-Richtlinien" value="Verletzung IT-Richtlinien"></v-radio>
<v-radio label="Wiederholte oder massive Störung" value="Wiederholte"></v-radio>
<v-radio label="Vorgaben zur Arbeitssicherheit nicht befolgt" value="Vorgaben zur Arbeitssicherheit nicht befolgt"></v-radio>
<v-radio label="Anderes,siehe Massnahmen/Bemerkungen" value="Anderes"></v-radio> </v-radio-group>
</v-flex>
</v-flex>
</v-container>
</v-layout>
<!-- Textarea for the measure (Massnahme) and remarks (Bemerkungen) -->
<v-layout align-center row fill-height>
<v-flex xs12 sm5>
<v-flex xs12 sm5>
<v-flex xs12 sm5 text-left>
<h2>Massnahmen/Bemerkungen*</h2>
</v-flex>
</v-flex>
</v-flex>
</v-layout>
<v-layout align-center row fill-height>
<v-text-field label="Massnahmen und Bemerkungen" name="name" :counter="500" textarea :rules="[v => !!v || 'Grund für Verfehlung wird benötigt']" v-model="data['massnahmen']"></v-text-field>
</v-layout>
<!-- CheckBox if the teacher wants to have a meeting with the student and the head of department -->
<v-layout align-center row fill-height>
<v-checkBox label="Runder Tisch gewünscht" v-model="data['runderTisch']" value=""></v-checkBox>
</v-layout>
<!-- CheckBox for signing the form -->
<v-layout align-center row fill-height>
<v-checkBox label="Signieren* (Hiermit wird bestätigt,dass die Angaben dieses Formulars korrekt sind und mit dem betroffenen Lernenden besprochen wurden. Dies kann nicht rückgängig gemacht werden.)" v-model="data['signatur']" value="" :rules="[v => !!v || 'Ereignisprotokoll muss signiert werden']">
</v-checkBox>
</v-layout>
<br>
<!-- Submit button -->
<div>
<v-layout align-center row fill-height>
<p style="color: red">* Pflichtfelder</p>
</v-layout>
<!-- <div v-html="error" style="color: red"></div> -->
<v-alert
v-if="error"
:value="error"
outlined
color="red"
type="error"
style="width:33%"
transition="slide-y-transition"
>
{{error}}
</v-alert>
<v-alert
v-if="savingSuccessful = null"
:value="alert"
color="green"
type="success"
style="width:33%"
transition="slide-y-transition"
>
Das Ereignisprotokoll wurde erfolgreich erstellt.
</v-alert>
<v-btn dark style="background-color:#0382b5" class="darken-2" type="submit" @click="submit" v-if="!savingSuccessful">Bestätigen
</v-btn>
</div>
<br>
<!-- Info button and text -->
<v-hover>
<v-card-text class="pt-1" style="position: relative">
<v-expand-transition>
<div v-if="isOpen" style="height: 100%; position: relative">
<h3 class="text-sm-left">Wichtige Hinweise:</h3>
<p class="text-sm-left">
Mit dem vorliegenden Ereignisprotokoll wird festgehalten,dass die Lehrperson eine Handlung oder ein Verhalten festgestellt hat,das nicht den geltenden und kommunizierten Vorgaben und Erwartungen entspricht.
<p class="text-sm-left">
Mit ihrer Unterschrift bestätigen beide Parteien,dass die Lehrperson der bzw. dem Lernendenden erläutert hat,aus welchen Gründen eine Handlung order ein Verhalten verfehlt ist und wie dies in Zukunft korrigiert werden soll.
</p>
<p class="text-sm-left">
Fünf Ereignisprotokolle führen zu einer gelben Karte (PL2107VA:LE-disziplmassnahmen_I. Grobe Verfehlungen können direkt zu einer gelben Karte führen.Dazu zählen bspw.:
</p>
<p class="text-sm-left">
Dazu zählen bspw.:
<ul>
<li>Unentschuldigte Absenzen</li>
<li>Nicht-Einhalten von persönlich unterzeichneten Weisungen (bspw. Lehrvertrag,IT-Weisugngen</li>
<li>Beleidigung,Beschimpfung oder üble Nachrede gegenüer Lernenden,Mitarbeitenden und externen Partnern der .</li>
<li>u.a.m.</li>
</ul>
</p>
</div>
</v-expand-transition>
<v-btn color="#0382b5" @click="onClick()" dark absolute small fab right top>
<i class="material-icons">
info
</i>
</v-btn>
</v-card-text>
</v-hover>
</panel>
</v-container>
</template>
<script>
import Panel from '@/components/Panel'
import * as easings from 'vuetify/es5/util/easing-patterns'
import BackendRequests from '@/api/BackendRequests'
export default {
// Defined local variables for this specific component
data() {
return {
vorname: this.$store.state.user.Vorname,nachname: this.$store.state.user.Nachname,klasse: this.$store.state.user.Klassenname,lernenderID: this.$store.state.user.ID_User,ereignisprotokolle: [],error: null,required: (value) => !!value || 'Ausfüllen',existingForm: [],isOpen: false,require_value: 1,alert: false,savingSuccessful: null,data: {
reason_id: null,short_teacher: null,first_teacher: null,last_teacher: null,short_student: null,first_student: null,last_student: null,Class_student: null,mail_student: null,massnahmen: null,runderTisch: null,signatur: null,}
}
},methods: {
// Send the form to the backend when all required fields have been completed
async submit() {
this.error = null
Object.keys(this.data).forEach(key => {
if(this.data[key]==null && key!='runderTisch'){
this.error = 'Bitte alle benötigten Felder ausfüllen.'
}
});
this.data['teacher_id']=this.lernenderID;
console.log(this.error)
if(this.error==null){
try {
let res = await BackendRequests.postForm(this.data)
this.$router.go()
} catch (err) {
this.error = err.response.data.error;
}
}
if(this.error !== err.response.data.error){
this.savingSuccessful = true
}
window.setInterval(() => {
this.alert = false;
},3500)
},onClick() {
if (this.isOpen === true) {
this.isOpen = false
} else {
this.isOpen = true
}
},checkForm:function(e) {
},hide_alert: function (event) {
// `event` is the native DOM event
window.setInterval(() => {
this.alert = false;
},3500)
},},mounted: function () {
if(alert){
this.hide_alert();
}
}
}
components: {
Panel
}
</script>
解决方法
尝试使用 v-model 而不是 value。 Vuetify 会在一段时间后自动关闭它。您可以设置计时器或将其设置为永久并自行手动处理关闭
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。