<script setup>
|
|
import {onMounted, reactive, ref} from "vue"
|
import {useRoute} from "vue-router"
|
|
const route = useRoute()
|
const userId = route.params.userId
|
const users = reactive({
|
total: 0,
|
offset: 0,
|
limit: 10,
|
data: [],
|
})
|
const error = ref(null)
|
|
onMounted(init)
|
|
/////////////////////////////////////////////////////////////////////////
|
|
async function init () {
|
const res = await fetch(`/api/users?token=jiuGfr432898D90290kjfsldkfn3hh8F`)
|
const data = await res.json()
|
console.log(data)
|
if (res.status === 200) {
|
Object.assign(users,data)
|
}
|
else {
|
error.value = `ERROR: ${res.status}`
|
}
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
<h1>Users</h1>
|
<p>{{ userId }}</p>
|
<p v-if="error">{{ error }}</p>
|
|
<div class="users">
|
<table>
|
<thead>
|
<tr>
|
<th>usr_id</th>
|
<th>login</th>
|
<th>firstname</th>
|
<th>lastname</th>
|
<th>gender</th>
|
<th>email</th>
|
<th>institution</th>
|
<th>department</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="user in users.data">
|
<td>{{user.usr_id}}</td>
|
<td>{{user.login}}</td>
|
<td>{{user.firstname}}</td>
|
<td>{{user.lastname}}</td>
|
<td>{{user.gender}}</td>
|
<td>{{user.email}}</td>
|
<td>{{user.institution}}</td>
|
<td>{{user.department}}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
<pre>{{ users }}</pre>
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
</style>
|
