I am attempting to display the changing elapsed time from a specified start time
<template>
<div class="dashboard-editor-container">
<div class="wrapper__body">
<el-row :gutter="30">
<el-col v-for="item in options" :key="item.value" align="middle" :xs="24" :sm="24" :md="24" :lg="4" :xl="24" style="margin-bottom:10px">
<el-button type="primary" style="width: 180px;height:120px ;" >{{item.label}} - {{getTimer(item.FechaHora)}}</el-button>
</el-col>
</el-row>
</div>
</div>
</template>
js
<script>
export default {
data() {
return {
options: [{
value: '01',
label: 'Room 1',
FechaHoraInicio:'2020-02-18T18:17:53.56',
FechaHoraSalida:'2020-02-18T18:17:53.56',
}, {
value: '02',
label: 'Room 2',
FechaHoraStartTime:'2020-02-18T18:17:53.56',
FechaHoraSalida:'2020-02-18T18:17:53.56',
}, {
value: '03',
label: 'Room 3',
FechaHoraStartTime:'2020-02-18T18:17:53.56',
FechaHoraSalida:'2020-02-18T18:17:53.56',
},
}
}
},
computed: {
getTimer : function(FechaHoraInicio) {
setInterval(function(){
return Date.now()-new Date(FechaHoraInicio)
}, 3000);
},
},
}
</script>
The buttons are generated dynamically with individual start times, and I aim to calculate the passing time dynamically
For each button created dynamically with its specific start time, I require the dynamic display of elapsed time as a clock by subtracting the current time from the start time.
https://i.stack.imgur.com/QXIGt.png
The displayed time indicates the duration since the room was rented