trendplays/resources/js/panel/panel.vue

<template>
<sidebar :active="active"></sidebar>
<transition name="fade" mode="out-in">
<div v-if="active === ''" id="main">
	<section class="welcome-pane"><h3>Welcome, {{user.name}}!</h3></section>
	<section class="credits-pane"><img src="../../images/wallet2.svg" alt="wallet" class="icon"/><p>Credits: ${{user.credits}}</p></section>
	<section class="alerts-pane"><h4>News and Announcements</h4>
	<p>We've just launched. Thanks for joining us.</p>
	</section>
	<section class="recent-pane"><h4>Recent Activity</h4>
	<table>
		<thead><th>Date</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
		<tbody>
		<tr v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
		<template v-if="order.status != 'pending'">
		<td>{{order.updated_at}}</td>
		<td>{{order.service.name}}</td>
		<td :class="order.status"
		class="status"><span>{{order.status.charAt(0).toUpperCase() +
		order.status.slice(1)}}</span></td>
		<td>{{order.quantity}}</td>
		</template>
		</tr>
		</tbody>
	</table>
	</section>
</div>
<div v-else-if="active === '#orders'" id="main">
	<div class="actions"><a href="#orders/new">New</a></div>
	<section class="pending-pane">
	<h4>Pending Orders</h4>
	<ul>
		<template v-bind:key='order.id' v-for="order in orders">
			<li v-if="order.status == 'pending'">{{order.service.name}} - {{order.updated_at}}</li>
		</template>
	</ul>
	</section>
</div>
</transition>
</template>

<script>
import Sidebar from './sidebar.vue'

export default {
	components: {
		Sidebar,
	},
	data() {
	return {active: window.location.hash, user: '',
	token: '', orders: ''}},
}
</script>