Fix vue-cli linter problems

frontend/src/components/AdminNewAdmin.vue

@@ -28,7 +28,7 @@
 					<strong v-if='filteredAdmins.length === 0'>There are no other admins</strong>
 					<template v-else>
 						Current admins are you,
-						<span v-for='(admin, $index) in filteredAdmins'>
+						<span v-for='(admin, $index) in filteredAdmins' :key='admin.username'>
 							<router-link :to='"/user/" + admin.username'>{{admin.username}}</router-link>
 							<template v-if='$index !== filteredAdmins.length-1'>,</template>
 						</span>

frontend/src/components/ColourPicker.vue

@@ -130,7 +130,7 @@
 		watch: {
 			value () {
 				let e = document.createElement('span');
-				    e.style.backgroundColor = this.value;
+				e.style.backgroundColor = this.value;
 
 				let rgbString = e.style.backgroundColor;
 				let rgbArray = this.rgbStringToArray(rgbString);
@@ -212,10 +212,7 @@
 
 			
 				let rect = this.$refs.hue.getBoundingClientRect();
-
 				let left = e.clientX - rect.left - 2;
-				let top = e.clientY - rect.top - 2;
-
 
 				if (e.clientX > rect.right) left = rect.width - 2;
 				if (e.clientX < rect.left) left = -2;

frontend/src/components/EmojiSelector.vue

@@ -14,7 +14,7 @@
 					"emoji_selector__tooltip--right" : rightAlign
 				}'
 			>
-				<template v-for='(row, $index) in emojis'>
+				<div v-for='(row, $index) in emojis' :key="'emoji-row-' + $index">
 					<div class='emoji_selector__title'>
 						{{row.title}}
 					</div>
@@ -22,10 +22,11 @@
 						<span
 							class='emoji_selector__emoji'
 							v-for='emoji in row.emojis'
+							:key='emoji'
 							@click='emitEmoji(emoji)'
 						>{{emoji}}</span>
 					</div>
-				</template>
+				</div>
 			</div>
 		</div>
 	</div>

frontend/src/components/FancyInput.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class='fancy_input' v-bind:style='{width: width || "auto"}'>
 		<div 
-			 style='position: relative; display: inline-block;'
+			style='position: relative; display: inline-block;'
 		>
 			<div
 				class='fancy_input__placeholder'

frontend/src/components/MenuButton.vue

@@ -13,6 +13,7 @@
 		<template slot='menu'>
 			<div
 				class='menu_button__option'
+				:key='"menu-button-option-" + option.value + "-" + $index'
 				v-for='(option, $index) in options'
 				@click='emit(option.event)'
 				:style="{ 'border-bottom' : $index === options.length-1 ? 'none' :  'solid thin rgb(245, 245, 245)' }"

frontend/src/components/MoreThreads.vue

@@ -12,7 +12,7 @@
 				<div class='more_threads__date_created'>Date created</div>
 			</div>
 
-			<div class='more_threads__thread' v-for='thread in threads' @click='goToThread(thread)'>
+			<div class='more_threads__thread' :key='"thread-id-" + thread.id' v-for='thread in threads' @click='goToThread(thread)'>
 				<div class='more_threads__name' >{{thread.name}}</div>
 				<div class='more_threads__date_created'>{{ thread.createdAt | formatDate }}</div>
 			</div>

frontend/src/components/ReportPostModal.vue

@@ -54,7 +54,7 @@
 							postId: this.postId,
 							reason: this.selectedOption
 						})
-						.then(res => {
+						.then(() => {
 							this.setShowModal(false)
 							this.selectedOption = 0
 							this.loading  = false

frontend/src/components/ScrollLoad.vue

@@ -5,15 +5,11 @@
 </template>
 
 <script>
-	import LoadingButton from './LoadingButton'
 	import throttle from 'lodash.throttle'
 
 	export default {
 		name: 'ScrollLoad',
 		props: ['loading', 'query-selector', 'padding-bottom', 'padding-top'],
-		components: {
-			LoadingButton
-		},
 		computed: {
 			element () {
 				if(this.querySelector){
@@ -24,7 +20,7 @@
 			}
 		},
 		methods: {
-			onScroll: throttle(function (e) {
+			onScroll: throttle(function () {
 				let paddingBottom = this.paddingBottom || 300;
 				let paddingTop = this.paddingTop || 150;