vue.js - 成功将数据插入数据库后如何使用 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 会在一段时间后自动关闭它。您可以设置计时器或将其设置为永久并自己手动处理关闭
推荐阅读
- mysql - 左连接上的 Concat 正则表达式
- javascript - 如何让视口元标记在我的响应式网站上正常工作？
- javascript - 从 offsetX 值中获取数值
- php - 挣扎于 PHP/MySQL 分页
- python - Cx_Freeze 构建没有错误，但 exe 没有打开
- java - 无法解决单元测试中的类型错误
- firebase - Firebase 部署“发生意外错误”
- hadoop - PIG：按前一个表结果过滤配置单元表
- java - 在 Java 中实现 Queue 但不能覆盖 iterator() 方法
- react-native - 单击后退按钮时，React Native 导航标题背景颜色恢复为白色