om/public/routes/profilCard.js

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 () {

        }
    }
});