woothu
45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<CRow>
|
|
<CCol col="12" lg="6">
|
|
<CCard>
|
|
<CCardHeader>
|
|
User id: {{ $route.params.id }}
|
|
</CCardHeader>
|
|
<CCardBody>
|
|
<CTable
|
|
striped
|
|
small
|
|
fixed
|
|
:items="getUserData($route.params.id)"
|
|
:fields="$options.fields"
|
|
/>
|
|
</CCardBody>
|
|
<CCardFooter>
|
|
<CButton color="primary" @click="goBack">Back</CButton>
|
|
</CCardFooter>
|
|
</CCard>
|
|
</CCol>
|
|
</CRow>
|
|
</template>
|
|
|
|
<script>
|
|
import usersData from './UsersData'
|
|
export default {
|
|
name: 'User',
|
|
fields: [
|
|
{ key: 'key', _style: 'width:150px' },
|
|
{ key: 'value' , _style: 'width:150px;' }
|
|
],
|
|
methods: {
|
|
getUserData (id) {
|
|
const user = usersData.find((user, index) => index + 1 == id)
|
|
const userDetails = user ? Object.entries(user) : [['id', 'Not found']]
|
|
return userDetails.map(([key, value]) => { return { key, value } })
|
|
},
|
|
goBack() {
|
|
this.$router.go(-1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|