bookmark without color change

public/routes/bookmark.js

 
         },
         getMessages: function(){
-            var _usrid = "5d360f06b8f3ce67d12ccc92";
+            var arr = auth.bookmarks;
+            console.log("arr: "+arr+" auth.bookmarks: "+auth.bookmarks);
+            _messagelist.splice(0, _messagelist.length);
+            _messagelist.push.apply(_messagelist, arr);
+            for (var e in arr) {
+                if (!_messages[arr[e]]) {
+                    //arr[e] =arr[e].replace(/\[/g, '').replace(/\"/g, '').replace(/\]/g, '')
+                    console.log("getinsertmessage: "+ arr[e]);
+                    get_insert_message(arr[e]);
+                }
+            }
+
+
+
+            /*var _usrid = auth.user;
             $.ajax({
                 url: "api/usr/id/" + _usrid,
                 method: "GET"
 			function have_error(err) {
 				console.log("error: " + err.responseText);
 				console.log(err);
-			}
+			}*/
         }
     },
     mounted: function (){

public/routes/home.js

         v-for="id in messagelist.slice().reverse()"
         :key="id"
         :msg="messages[id] || {}"
+        :isBookmark="bookmarkArray[id]"
     ></MsgCard>
 </div>
 </div>`,
             messagelist: _messagelist,
             messages: _messages,
 			isSearchActiv: _isSearchActiv,
-			isSubscripeButtonActiv: _isSubscripeButtonActiv
+			isSubscripeButtonActiv: _isSubscripeButtonActiv,
+            bookmarkArray: auth.bookmarks,
         };
     },
     methods: {
 
 			_isSearchActiv = false;
 		}
+
     },
     mounted: function () {
         this.list_messages();

public/routes/msgCard.js

     template: `<div class="om-card card">
                 <h6 class="msg-head">
                 <b>{{ msg.subject }}</b>
-                <div id="msgid">{{msg._id}}</div>
+                <div id="msgid" >{{msg._id}}</div>
                 <img src="favicon.ico" width=20px height=20px>
                 </h6>
                 {{ msg.message }}<br>
                 <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(msg._id)" v-if="!isActive">bookmark_border</i>
-                <i class="material-icons" @click="myFilter(msg._id)" v-else="isActive">bookmark</i>
+                <i id="bockmark-not-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-if="!isActive">bookmark_border</i>
+                <i id="bockmark-active" class="material-icons" :key="isActive" @click="myFilter(msg._id)" v-else>bookmark</i>
                 </div></div>`,
-    props: ['msg'],
+    props: ['msg', 'isBookmark'],
 
     data: function () {
         return {
-            isActive: false,
+            isActive: this.isBookmark,
+            isActive_: 0,
+            msgid: this.msg._id
         };
     },
 
     methods: {
-        myFilter: function(_messageid) {
+        myFilter: function (_messageid) {
             //var _messageid = $("#msgid").text();
+            if (this.isActive == true) {
+                var index = auth.bookmarks.indexOf(_messageid);
 
-            var _bookmark = auth.bookmarks;
-            _bookmark.push(_messageid);
-            console.log("msgid"+_bookmark);
-            var _userid = "5d360f06b8f3ce67d12ccc92";
+                if (index > -1) {
+                    auth.bookmarks.splice(index, 1);
+                }
+                this.isActive = false;
+            } else {
+                console.log("_messsageid: "+_messageid+" bookmarks: "+auth.bookmarks);
+                auth.bookmarks.push(_messageid);
+                this.isActive =true;
+            }
+            /*console.log("msgid"+_bookmark);
+            var _userid = auth.user;
             this.isActive = !this.isActive;
             if(this.isActive){
                 $.ajax({
                     console.log("error: " + err.responseText);
                     console.log(err);
                 }
-            }
+            }*/
         },
-        filterForTag: function(tag) {
-            console.log("link: " +tag);
+        filterForTag: function (tag) {
+            console.log("link: " + tag);
             searching(tag);
         },
+        isBookmarkActive: function (msgid) {
+            //console.log("isBookmarkActive(): " + msgid);
+            if (auth.bookmarks.indexOf(msgid) > -1) {
+                // $("#bockmark-not-active").css("visibility","hidden");
+                // $("#bockmark-active").css("visibility","visible");
+                this.isActive = true;
+                //console.log("isBookmarkActive(): " + this.isActive);
+                this.isActive_ = 1;
+
+            }
+        }
+    },
+    beforeMount: function () {
+        //this.isBookmarkActive();
     }
 });

public/style/style.css

     float: right;
   }
 }
-
-.subscribe-btn{
-	float:right;
+#bockmark-not-active {
+  visibility: visible;
 }

public/style/style.less

         float: right;
     }
 }
+
+#bockmark-not-active{
+    visibility: visible;
+}
+#bockmark-active{
+    //visibility: hidden;
+}