Hook up to server, prevent from liking if not logged in

src/components/HeartButton.vue

@@ -2,38 +2,36 @@
 	<label class='heart_button' :class='{"heart_button--unlikeable": !likeable}'>
 		<input
 			type='checkbox'
-			v-bind:checked='value'
-			v-bind:disabled='!likeable'
-			v-on:change="$emit('input', $event.target.checked)"
+			:checked='value'
+			:disabled='!likeable'
+			v-on:change="change"
 		>
 		<span class='fa'></span>
-		<span class='heart_button__count'>{{_likes}}</span>
+		<span class='heart_button__count'>{{likesCount}}</span>
 	</label>
 </template>
 
 <script>
 	export default {
 		name: 'HeartButton',
-		props: ['value', 'likes', 'likeable'],
+		props: ['liked', 'likes', 'likeable'],
 		data () {
 			return {
-				likedDuringSession: false
+				value: this.liked,
+				likesCount: this.likes.length
 			}
 		},
-		computed: {
-			_likes () {
-				let likes = this.likes.length
-
-				if(this.likedDuringSession) {
-					return likes + 1
+		methods: {
+			change (e) {
+				this.value = e.target.checked
+				
+				if(this.value) {
+					this.likesCount++
 				} else {
-					return likes
+					this.likesCount--
 				}
-			}
-		},
-		watch: {
-			value () {
-				this.likedDuringSession = this.value
+
+				this.$emit('change', this.value)
 			}
 		}
 	}

src/components/ThreadPost.vue

@@ -32,10 +32,10 @@
 			>
 				<div class='post__footer_sub_group'>
 					<heart-button
-						v-model='likeState'
+						:liked='liked'
 						:likes='post.Likes'
-						:likeable='$store.state.username !== post.User.username'
-						@input='emitLikeUpdate'
+						:likeable='$store.state.username && $store.state.username !== post.User.username'
+						@change='emitLikeUpdate'
 					></heart-button>
 				</div>
 				<div class='post__footer_sub_group' v-if='post.Replies.length'>
@@ -92,8 +92,7 @@
 			return {
 				hover: false,
 				showShareModal: false,
-				postURL: `${location.origin}/thread/${post.Thread.slug}/${post.ThreadId}/${post.postNumber}`,
-				likeState: false
+				postURL: `${location.origin}/thread/${post.Thread.slug}/${post.ThreadId}/${post.postNumber}`
 			}
 		},
 		computed: {
@@ -103,6 +102,9 @@
 				} else {
 					return '[deleted]'
 				}
+			},
+			liked () {
+				return this.post.Likes.some(u => u.username === this.$store.state.username)
 			}
 		},
 		methods: {
@@ -115,8 +117,8 @@
 			goToThread () {
 				this.$router.push(`/thread/${this.post.Thread.slug}/${this.post.Thread.id}`)
 			},
-			emitLikeUpdate () {
-				this.$emit('like', this.post.id, this.likeState)
+			emitLikeUpdate (state) {
+				this.$emit('like', this.post.id, state)
 			}
 		}
 	}

src/components/routes/Thread.vue

@@ -126,7 +126,15 @@
 				this.$store.dispatch('addPostAsync', this);
 			},
 			updatePostLike (id, state) {
-				console.log(arguments)
+				if(state) {
+					this.axios
+						.put('/api/v1/post/' + id + '/like')
+						.catch(AjaxErrorHandler(this.$store))
+				} else {
+					this.axios
+						.delete('/api/v1/post/' + id + '/like')
+						.catch(AjaxErrorHandler(this.$store))
+				}
 			},
 			loadNextPosts () {
 				let vue = this