Vue.component('login-panel', { template: ` <form action=""> <div class="modal-card" style="width: auto"> <header class="modal-card-head"> <p class="modal-card-title">Login</p> </header> <section class="modal-card-body"> <b-field> <b-input placeholder="User (Ohmportal)" :value="user" v-model=user required> </b-input> </b-field> <b-field> <b-input type="password" placeholder="Password" :value="pwd" required> </b-input> </b-field> <b-checkbox>Eingeloggt bleiben</b-checkbox> <div v-if="showError" style="color:red;"> Versuche es nochmal.</div> </section> <footer class="modal-card-foot"> <button class="button" type="button" @click="$parent.close()">Close</button> <button class="button is-primary" @click="checkData()">Login</button> </footer> </div> </form>`, data: function () { return { user: "name", pwd:"password", showError:false, }; }, methods: { checkData(){ if(this.user === "name" && this.pwd === "password"){ console.log("correct"); this.$parent.close(); }else{ console.log("wrong"); this.showError=true; } }, logIn(){ $parent.close(); }, }, });