@extends('layouts.admin-master')
@section('content')
<div id="app">
    <section class="content-header">
        <h1>Dashboard <small>Optional description</small></h1>
        <ol class="breadcrumb">
            <li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Dashboard</a></li>
            {{-- <li class="active">Here</li> --}}
        </ol>
    </section>
        
    <section class="content container-fluid">
        <h1>Hello</h1>
        <ul>
            <li v-for="user in users.data" :key="user.id">@{{ user.name }}</li>
        </ul>
        <div class="text-center">
            <pagination :data="users" @pagination-change-page="getResults"></pagination>
        </div>
    </section>

</div>
@endsection
@section('script')
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            users: {}
        },
        mounted() {
    		this.getResults();
        },
        methods: {
		getResults(page = 1) {
			axios.get('api/user?page=' + page)
				.then(response => {
					this.users = response.data;
				});
		}
	}
    });
</script>
@endsection