I have a unique situation in my Vue app where I'm utilizing v-data table. The current display of data in the table works fine, but I now want to enhance it by incorporating the slice method.
Here is the current data displayed in the table:
https://i.sstatic.net/uGDTu.png
And here is how I envision the improved display:
https://i.sstatic.net/GC78W.png
I understand that implementing the slice method will help achieve this desired output, but I'm unsure of how to implement it specifically with v-data-table. Any guidance on applying this method would be greatly appreciated.
table.js
<v-data-table
v-model="selected"
dense
:headers="headers"
:items="workHours"
show-select
></v-data-table>
script - headers
headers: [
{ text: 'Start date', value: 'startDate' },
{ text: 'End date', value: 'endDate' },
]
}),
script - methods
methods: {
async getworkHours() {
let result = await this.sendAjaxWithParams(this.ajaxURLs.getworkHours);
this.workHours= result.result.items;
},
api.js
router.post('/getworkHours', (req, res) => {
var items = [
{
startDate: '2018-01-05T09:00:00Z',
endDate: '2018-01-05T16:45:00Z',
},
{
startDate: '2018-01-03T07:00:00Z',
endDate: '2018-01-03T19:00:00Z',
}