How can I solve the issue of displaying "No data available" in the user list data table on my userDirectory page?
I have created a userDirectory page with a subheader and a data table from Vuetify, but it seems to have no data available.
<template>
<div class="userDirectory">
<v-subheader class="d-flex justify-space-between align-center">
<h3>User Directory</h3>
</v-subheader>
<v-row>
<v-card>
<template>
<v-data-table :headers="headers" :items="users" :items-per-page="5" class="elevation-1"></v-data-table>
</template>
</v-card>
</v-row>
</div>
</template>
<script>
import axios from 'axios'
export default {
data: () => ({
headers: [
{
text: 'User ID',
align: 'start',
sortable: false,
value: 'u.id',
},
{ text: 'Created At', value: 'created_at' },
{ text: 'Email', value: 'email' },
{ text: 'Is Premium', value: 'is_premium' },
{ text: 'Goal', value: 'goal' },
{ text: 'Fitness Level', value: 'fitness_level' },
{ text: 'Profile Completed', value: 'profile_completed' },
{ text: 'Accepted Health Warning', value: 'accepted_health_warning' },
{ text: 'Role', value: 'roles_list' },
],
users: [],
}),
methods: {
async loadUsers() {
axios.get('https://somehost/api/admin/getUserList', { headers: {Authorization : 'Bearer ' + 'token' }})
.then(res=> console.log(res))
.catch(err=> console.log(err))
}
},
}
</script>
<style scoped>
</style>
Furthermore, I have an API file that successfully retrieves the data using a GET request in Thunder Client with a bearer token, but encounters issues in Vue. Here's the code snippet:
const { response } = require("express");
const pool = require("../../config/database");
async function listUsers() {
let sqlquery = `select
u.id,
created_at,
email,
is_premium,
goal,
fitness_level,
profile_completed,
accepted_health_warning,
group_concat(r.name) as roles_list
from users u
left join user_role ur on ur.user_id = u.id
left join role r on r.id = ur.role_id
group by u.id;`
return new Promise((resolve, reject) => {
pool.query(sqlquery,
(error, results) => {
if (error) {
return reject(error)
}
return resolve(results)
})
})
}
module.exports.listUsers = listUsers;