trendplays/resources/js/panel/services.vue

<template>
<div>
	<div class="services-menu">
	<button class="selected">Services</button>
	<button>Credits</button>
	<div class="menu-slider">
	<div></div></div>
	</div>
	<div class="services-legend"><h5>Name</h5>
<h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
<ServicePane :site="'youtube'" :services="services"></ServicePane>
<ServicePane :site="'instagram'" :services="services"></ServicePane>
<ServicePane :site="'twitter'" :services="services"></ServicePane>
<ServicePane :site="'tiktok'" :services="services"></ServicePane>
</div>
</template>

<script>
import ServicePane from './service-pane.vue'


export default {
	data() {
		return {servicePane: true, services: ''}
	},
	components: {ServicePane},
	props: ['token'],
	created() {
		fetch("/panel/services", {
			method: 'GET',
			headers: {'Content-Type': 'application/json',
				'Accept': 'application/json',
				'X-XSRF-TOKEN': this.token}
		}).then(response => {
			response.json().then(data => {this.services = data})
		})
	},
}
</script>