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 id="overlay">
	<img class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
	<div class="overlay-item">
		<img class="icon" src="../../images/youtube-icon.svg" alt="">
		<h3>Location Targeted Views</h3>
		<h4>Quantity</h4>
		<div><input required type="number"><span> / 10000</span></div> 
		<h4>Location</h4>
		<div><select required id="country" name="">
		<option value="usa">USA</option>
		<option value="canada">Canada</option>
		<option value="uk">United Kingdom</option>
		<option value="germany">Germany</option>
		<option value="france">France</option>
		</select></div> 
		<h4>URL</h4>
		<div><input required type="url" id="url"></div> 
		<button>Submit</button>
	</div>
</div>
</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>