Get Token

<!DOCTYPE html>
<html>
<head>
	<title>Data Realtime</title>
	<style type="text/css">
		table, td, th {
		    border: 1px solid #ddd;
		    font-size: 13px;
  			font-family: helvetica;
  			vertical-align: middle;
  			text-align: center;
			}
		table {
		    border-collapse: collapse;
		    width: 100%;
			}
		th, td {
		    padding: 15px;
			}
		th {
			background-color: #96E6F8;
		}
	</style>
</head>
<body>
<div id="token">
<input type="submit" v-on:click.prevent="getToken">
<table>
<tr>
	<th>No</th>
	<th>Road Name</th>
	<th>Local Date & Time</th>
	<th>Ignition Status</th>
	<th>Device Name</th>
	<th>RPM</th>
	<th>Speed</th>
	<th>Heading</th>
	<th>Longitude</th>
	<th>Latitude</th>
	<th>Geofences</th>
	<th>Mileage</th>
</tr>
<tr>
	<td v-for="route in route"> {{ route.no }} </td>
</tr>
</table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

<script>

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

var table = new Vue({
	el: '#token',
	data: {
		username: 'admin',
		password: 'admin',
		route: [
			{
				no:'1',
				roadName: '',
				dateTime: '',
				ignition: '',
				deviceName: '',
				rpm: '',
				speed: '',
				heading: '',
				longitude: '',
				latitude: '',
				geofences: '',
				mileage: ''
			}
		]
	},
  methods: {

    getToken: function() {
        this.$http.post('localhost/api_users/login', { username: this.username, password: this.password} ).then((response) => {
            console.log(response.data.token);
        }, (response) => {
						console.log('Login Gagal');
	        });
    }
  }
});

</script>

</body>
</html>