example-code/javascript-vue/js/panel/orders.vue

<template>
<div>
	<section class="pending-pane">
	<div class="actions"><a class="new-order" href="#new-order">New</a><a
	class="new-order" href="#credits">Add Credits</a></div>
	<h4>Pending Orders</h4>
	<ul>
		<template v-bind:key='order.id' v-for="order in orders">
		<div class="pending-item" v-if="order.status == 'pending'">
			<div class="pending-heading">
			<li @click="togglePending($event)">{{order.service.name}} ({{order.updated_at}})</li>
			<img class="chevron" src="../../images/chevron-down.svg" alt="">
			</div>
		<div class="pending-content">
			<p>ID: {{order.id}}<br>URL: {{order.url}}<br>Quantity:
			{{order.quantity}}<br>Note: {{order.note}}</p>
		</div>
		</div>
		</template>
	</ul>
	</section>
	<div class="info-grey"><p>Orders are typically completed within 1-5
	days.</p><div></div></div>
	<section class="history-pane">
		<h4>Order History</h4>

	<div class="table-scroller">
	<table>
		<thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th>
		<th>Quantity</th></thead>
		<tbody>
		<tr v-bind:key='order.id' v-for='order in
		orders.slice(historyPage*10-10, historyPage*10)'>
		<td>{{order.updated_at}}</td>
		<td>{{order.id}}</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>
		<td> <eye @click="select(order)"></eye> </td>
		</tr>
		</tbody>
	</table>
	</div>

	<img @click="moveHistory(false)" class="nav-btn left"
	src="../../images/arrow-left-circle-fill.svg" alt=""/>
	<p class="nav-legend">{{historyPage}}/{{Math.ceil(orders.length/10)}}</p>
	<img @click="moveHistory(true)" class="nav-btn right"
	src="../../images/arrow-right-circle-fill.svg" alt=""/>

	</section>

	<order-item v-if="selected" @close="close" :selected="selected"
	:token="token" @change-url="(url) => selected.url = url"></order-item>

</div>
</template>

<script>
import Eye from '../icons/eye-fill.vue'
import OrderItem from './order-item.vue'

function togglePending(event) {
	event.target.parentNode.parentNode.classList.toggle('selected')
}

function moveHistory(forward) {
	if (forward) {
		this.historyPage += 1
	} else {
		this.historyPage -= 1
	}
	if (this.historyPage < 1) {
		this.historyPage = 1
		return
	} else if (this.historyPage > this.orders.length/10+1) {
		this.historyPage -= 1
		return
	}
}

function close() {
	this.selected = null
}

function select(order) {
	this.selected = order
}

export default {
	components: {Eye, OrderItem},
	data() {return {historyPage: 1, selected: null}},
	methods: {
	togglePending, moveHistory, close, select
	},
	props: ['orders', 'token'],
}
</script>