MusicSite/frontend/components/Admin/QueueSongs.vue

<template>
	<div class="columns is-mobile">
		<div class="column is-8-desktop is-offset-2-desktop is-12-mobile">
			<table class="table is-striped">
				<thead>
					<tr>
						<td>YouTube ID</td>
						<td>Title</td>
						<td>Thumbnail</td>
						<td>Artists</td>
						<td>Options</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(index, song) in songs" track-by="$index">
						<td>
							<p class="control">
								<input class="input" type="text" :value="song.id" v-model="song.id">
							</p>
						</td>
						<td>
							<p class="control">
								<input class="input" type="text" :value="song.title" v-model="song.title">
							</p>
						</td>
						<td>
							<p class="control">
								<input class="input" type="text" :value="song.thumbnail" v-model="song.thumbnail">
							</p>
						</td>
						<td>
							<div class="control">
								<input v-for="artist in song.artists" track-by="$index" class="input" type="text" :value="artist" v-model="artist">
							</div>
						</td>
						<td>
							<a class="button is-danger" @click="remove(song, index)">Remove</a>
							<a class="button is-success" @click="update(song)">Save Changes</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				songs: []
			}
		},
		methods: {
			update (song) {
				this.socket.emit('queueSongs.update', song);
			},
			remove (songId) {
				this.socket.emit('queueSongs.remove', songId);
			}
		},
		ready: function() {
			let _this = this;
			_this.socket = _this.$parent.$parent.socket;
			_this.socket.emit('queueSongs.index', (data) => {
				console.log(data);
				_this.songs = data;
			});
		}
	}
</script>

<style lang="scss" scoped>
</style>