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 v-for="tag in msg.tag" @click="filterForTag(tag)">#{{ tag }} </a> <!--<b-button class="tags" type="is-text" v-for="tag in msg.tag">#{{ tag }} </b-button>--> </p> <div class="om-card-footer"> <div class="om-user-line"> <i class="material-icons">account_circle</i> Erstellt von {{ msg.user }}</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>`, props: ['msg'], data: function () { return { isActive: false, }; }, methods: { myFilter: function() { this.isActive = !this.isActive; }, filterForTag: function(tag) { console.log("link: " +tag); searching(tag); }, } });