upccrt/resources/js/views/Dashboard.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div v-if="!isLoading" class="col-md-12">
                <div class="col-md-4" v-for="(workOrder, index) in workOrders" :key="workOrder.woid">
                    <div class="card">
                        <div class="card-header">
                            <router-link :to="{ name: 'workorders', params: { id: workOrder.woid } }" class="h4 card-title">{{workOrder.woid}}</router-link>
                        </div>
                        <div class="card-body card-body-dark">
                            <div>
                                {{ workOrder.probdesc }}
                            </div>
                            <div>
                                {{ workOrder.suggested }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="col-md-12">
                <circle-spinner color="#663399"></circle-spinner>
            </div>
        </div>
    </div>
</template>
<script>    
import CircleSpinner from '../components/CircleSpinner.vue'
export default {
    components: {
        CircleSpinner
    },
    data () {
        return {
            workOrders: [],
            isLoading: true,
        }
    },
    mounted () {
        let token = localStorage.getItem('jwt')
        let user = localStorage.getItem('user')

        axios.defaults.headers.common['Content-Type'] = 'application/json'
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + token

        axios.get('api/users/'+user+'/workorders').then(response => {
            this.workOrders = response.data
            this.isLoading = false
        }).catch(error => {
            console.log(error)
        })
    },
    beforeRouteEnter (to, from, next) {
        if ( ! localStorage.getItem('jwt')) {
            return next('login')
        }

        next()
    }
}
</script>