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

        }
    }
});