om/public/routes/bookmark.js

const BookmarkRouter = {
    template: `
<div class="content">
    <div class="is-hidden-desktop">
        <div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
        <div class="om-card card">
            <h6 class="msg-head">
                <b>Betreff</b>
                <img src="favicon.ico" width=20px height=20px>
            </h6>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
            <a href="#">#beispiel #tag</a>
            <div class="om-card-footer">
                <div class="om-user-line">
                    <i class="material-icons">account_circle</i>
                    Erstellt von User 1
                </div>
                <i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
            </div>
        </div>
        <div class="om-card card">
            <h6 class="msg-head">
                <b>Betreff</b>
                <img src="favicon.ico" width=20px height=20px>
            </h6>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br><br>
            <a href="#">#beispiel #tag</a>
            <div class="om-card-footer">
                <div class="om-user-line">
                    <i class="material-icons">account_circle</i>
                    Erstellt von User 2
                </div>
                <i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
            </div>
        </div>
        <div class="om-card card">
            <h6 class="msg-head">
                <b>Betreff</b>
                <img src="favicon.ico" width=20px height=20px>
            </h6>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
            <a href="#">#beispiel #tag</a>
            <div class="om-card-footer">
                <div class="om-user-line">
                    <i class="material-icons">account_circle</i>
                    Erstellt von User 3
                </div>
				<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
            </div>
        </div>
    </div>

    <div class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
        <div class="bookmark-headline"><h4>Gepeicherte Beiträge</h4></div>
        <div class="om-card card">
            <h6 class="msg-head">
                <b>Betreff</b>
                <img src="favicon.ico" width=20px height=20px>
            </h6>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
            <a href="#">#beispiel #tag</a>
            <div class="om-card-footer">
                <div class="om-user-line">
                    <i class="material-icons">account_circle</i>
                    Erstellt von User 1
                </div>
                <i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
            </div>
        </div>
        <div class="om-card card">
            <h6 class="msg-head">
                <b>Betreff</b>
                <img src="favicon.ico" width=20px height=20px>
            </h6>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.  <br><br>
            <a href="#">#beispiel #tag</a>
            <div class="om-card-footer">
                <div class="om-user-line">
                    <i class="material-icons">account_circle</i>
                    Erstellt von User 2
                </div>
				<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
            </div>
        </div>
        <div class="om-card card">
            <h6 class="msg-head">
                <b>Betreff</b>
                <img src="favicon.ico" width=20px height=20px>
            </h6>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. <br><br>
            <a href="#">#beispiel #tag</a>
            <div class="om-card-footer">
                <div class="om-user-line">
                    <i class="material-icons">account_circle</i>
                    Erstellt von User 3
                </div>
				<i class="material-icons" @click="myFilter" v-if="!isActive">bookmark_border</i>
                <i class="material-icons" @click="myFilter" v-else="isActive">bookmark</i>
            </div>
        </div>
    </div>
</div>`,

    data: function () {
        return {
            messages: _messages,
            isActive: false,
        }
    },
    methods: {
        myFilter () {
            this.isActive = !this.isActive;
        }
    },
};