I am facing an issue with my table code where I need to repeat it 6 times to match the day column above. I would like to use v-for and make use of a variable called "count" which represents the number of days. Can someone assist me with this task?
<table class="table table-hover table-bordered">
<thead>
<tr>
<th scope="col" rowspan="2">Dosen</th>
<th scope="col" colspan="11" v-for="(hari, index) in hari" :key="index">{{hari.nama}}</th>
</tr>
<tr>
...
</tr>
</thead>
<tbody>
<tr v-for="(dosen, index) in dosen" :key="index">
<th scope="row">{{dosen.nama}}</th>
</tr>
</tbody>
</table>
The desired output can be viewed at: https://i.sstatic.net/URzVx.png
This is the script for retrieving the data:
<script>
onMounted(() =>{
if(!token) {
return router.push({
name: 'Login'
})
}
// Retrieving days
axios.defaults.headers.common.Authorization = `Bearer ${token}`
axios.get('http://localhost:8000/api/hari')
.then(response => {
// Storing response data in state variables
hari.value = response.data.data
count.value = response.data.count
}).catch(error => {
console.log(error.response.data)
})
// Retrieving time slots
axios.defaults.headers.common.Authorization = `Bearer ${token}`
axios.get('http://localhost:8000/api/jam')
.then(response => {
// Storing response data in state variables
jam.value = response.data.data
}).catch(error => {
console.log(error.response.data)
})
// Retreiving teachers/lecturers
axios.defaults.headers.common.Authorization = `Bearer ${token}`
axios.get('http://localhost:8000/api/dosen')
.then(response => {
// Assigning response data to state variables
dosen.value = response.data.data
}).catch(error => {
console.log(error.response.data)
})
})