Vue.component('MsgCard', {
    template: `<div class="om-card card">
                <h6 class="msg-head">
                <b>{{ msg.subject }}</b>
                <img src="favicon.ico" width=20px height=20px>
                </h6>
                {{ msg.message }}<br><br>
                <a href="#">{{ msg.tag }}</a></p>
                <div class="om-card-footer"> <div class="om-user-line">
                <i class="material-icons">account_circle</i>
                Erstellt von {{ msg.user }}</div>

                <a href="#" v-if="isFavorited" @click.prevent="unFavorite(post)">
				<i class="material-icons">bookmark_border</i></a>

                <a href="#" v-else @click.prevent="favorite(post)">
                <i  class="bookmark"></i>
                </a>

                </div></div>`,
    props: ['msg'],
   // props: ['post', 'favorited'],
    data: function () {
        return {
            // isFavorited: '',
        };
    },
   /* mounted() {
            this.isFavorited = this.isFavorite ? true : false;
        },
        computed: {
            isFavorite() {
                return this.favorited;
            },
        },*/
    methods: {
           /* favorite(post) {
                $.ajax({url: "api/ids", method: "POST"})
                    .then(response => this.isFavorited = true)
                    .catch(response => console.log(response.data));
            },
            unFavorite(post) {
                $.ajax({url: "api/ids", method: "POST"})
                    .then(response => this.isFavorited = false)
                    .catch(response => console.log(response.data));
            }*/
        },
});