Vue.component('ProfilCard', { template: `<div> <div class="profil-card card"> <br/> <img class="prof-image" src="img/profil_icon.png" alt="Card image cap"> <div class="logout-item"><i class="material-icons" @click="$router.push('/login')">exit_to_app</i></div> <div class="profil-text"> <h6><b>Benutzername:</b><br><br> <b>{{ profil.user }}</b><br><br> <b>Studiengang:</b><br><br> {{ profil.major }}<br><br> <b>Semester:</b><br><br> {{ profil.semester }}<br></h6> </div> <hr class="first"> <div class="btnprofil"> <button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ profil.abos }}</b> <br/></button> <button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ profil.saved }}</b><br/></button> </div> <section> <b-modal :active.sync="isCardModalActive" :width="600" scroll="keep"> <div class="card"> <header class="modal-card-head"> <p class="modal-card-title">Abonnierte Kanäle</p> </header> <div class="card-content"> <div class="content"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div> </div> <footer class="modal-card-foot"> <b-button size="is-medium" @click="isCardModalActive = false">Close</b-button> </footer> </div> </b-modal> </section> </div> </div>`, props: ['profil'], data: function () { return { isCardModalActive: false }; }, methods: { close: function () { } } });