90 lines
2.6 KiB
JavaScript
90 lines
2.6 KiB
JavaScript
|
const app = Vue.createApp({
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
contacts: [
|
||
|
|
{ name: "Hans", firstname: "Meier", dateOfBirth: "1967-12-15" },
|
||
|
|
{ name: "Luca", firstname: "Rudolf", dateOfBirth: "1999-01-12" },
|
||
|
|
{ name: "Laura", firstname: "Steiner", dateOfBirth: "2002-12-24" },
|
||
|
|
{ name: "Alfred", firstname: "Hauser", dateOfBirth: "1932-05-16" },
|
||
|
|
],
|
||
|
|
amountOfContacts: 4,
|
||
|
|
isVisible: false,
|
||
|
|
|
||
|
|
name: "",
|
||
|
|
firstname: "",
|
||
|
|
dateOfBirth: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
addContact() {
|
||
|
|
// Das folgende IF verhindert das Hinzufügen eines nicht kompletten Eintrags.
|
||
|
|
if (
|
||
|
|
this.name !== "" &&
|
||
|
|
this.firstname !== "" &&
|
||
|
|
this.dateOfBirth !== ""
|
||
|
|
) {
|
||
|
|
// Kontakt hinzufügen
|
||
|
|
this.contacts.push({
|
||
|
|
name: this.name,
|
||
|
|
firstname: this.firstname,
|
||
|
|
dateOfBirth: this.dateOfBirth,
|
||
|
|
});
|
||
|
|
// Kontaktzähler(amountOfContacts) erhöhen
|
||
|
|
this.amountOfContacts = this.amountOfContacts + 1; // (3 mal das gleiche Resultat)
|
||
|
|
//this.amountOfContacts += 1; // (3 mal das gleiche Resultat)
|
||
|
|
//this.amountOfContacts++ // (3 mal das gleiche Resultat)
|
||
|
|
|
||
|
|
// Eingaben leeren
|
||
|
|
this.name = "";
|
||
|
|
this.firstname = "";
|
||
|
|
this.dateOfBirth = "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
// mache einen watcher der uns mitteilt wenn wir 10 oder mehr contacts haben.
|
||
|
|
watch: {
|
||
|
|
/*
|
||
|
|
// für einen spezifischen verbotenen Namen
|
||
|
|
firstname() {
|
||
|
|
// wir wollen keine asdf* in unserer Adressliste
|
||
|
|
// * das ist einfach ein Beispiel
|
||
|
|
console.log("im watcher", this.newContactFirstname);
|
||
|
|
|
||
|
|
// wenn der firstname "asdf" ist soll eine Meldung (alert) kommen, das das keine gültige Eingabe ist.
|
||
|
|
if (this.firstname === "asdf") {
|
||
|
|
alert("dich wollen wir hier nicht");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
*/
|
||
|
|
|
||
|
|
// wir wollen einen Fluchwortfilter beim Vornamen. Egal ob gross oder klein geschrieben
|
||
|
|
firstname() {
|
||
|
|
// verbotene Namen sind: ["marc", "andrea", "yaren", "stefanie", "stephanie", "stefani"]
|
||
|
|
const evils = [
|
||
|
|
"andrea",
|
||
|
|
"marc",
|
||
|
|
"stefani",
|
||
|
|
"stefanie",
|
||
|
|
"stephanie",
|
||
|
|
"yaren",
|
||
|
|
];
|
||
|
|
|
||
|
|
for (let i = 0; i < evils.length; i++) {
|
||
|
|
const evil = evils[i];
|
||
|
|
if (this.firstname === evil) {
|
||
|
|
alert("gtfo");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
amountOfContacts() {
|
||
|
|
// wenn wir 7 oder mehr kontakte haben soll eine meldung(Zu oberst auf der Seite soll stehen "you're famous") erscheinen.
|
||
|
|
if (this.amountOfContacts >= 7) {
|
||
|
|
this.isVisible = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
app.mount("#app");
|