estoy tratando de implementar un contador con la Librería EasyTimer.js con VueJS, y no he logrado hacer funcionar, me parece es tema de addEventListener, la verdad no sé cómo funciona en VueJS y ni he encontrado información precisa para este tipo de situación, tengo los siguientes métodos:
LoadReports () {
var aArea = this.$route.params.area
this.reportes = []
this.piezasCount = []
Reportes.getCorrReportes(aArea).then(results => {
if (results.data.status === 'ok') {
var aIndex = 0
for (var item of results.data.reportes) {
if (!item.piezasDisp && Object.keys(item.piezas).length > 0) {
this.piezasCount.push({ key: aIndex, seconds: item.piezas.fecha })
}
this.reportes.push(item)
aIndex++
}
}
})
},
TimeTracking (aSeconds, index) {
var timer = new Timer()
timer.start({ precision: 'seconds', startValues: { seconds: aSeconds } })
timer.addEventListener('secondsUpdated', function (e) {
this.reportes[index].PiezaReqTime = timer.getTimeValues().toString()
})
}
y en la plantilla tengo lo siguiente:
<tr class="text-white" v-if="Object.keys(item.piezas).length > 0">
<td style="width: 200px; border: 1px solid #027be3;">{{ item.piezas.pieza }}</td>
<td class="text-center" style="width: 70px; border: 1px solid #027be3;">{{ item.piezas.tiempo }}</td>
<td class="text-center" style="width: 70px; border: 1px solid #027be3;"><span>{{ item.PiezaReqTime }}</span></td>
</tr>
<tr class="text-white" v-else>
<td class="text-center" style="width: 200px; border: 1px solid #027be3;">--</td>
<td class="text-center" style="width: 70px; border: 1px solid #027be3;">--</td>
</tr>
donde {{ item.PiezaReqTime }} debería el tiempo que va transcurriendo, pero no muestra nada, estoy seguro algo me falta.
De antemano muchas gracias.
Saludos
UPDATE:
Ahora creé un componente para mostrar el tiempo:
<template>
<span>{{ timer }}</span>
</template>
<script>
import { Timer } from 'easytimer.js'
export default {
props: {
seconds: {
type: Number,
default: 0
}
},
data () {
return {
timer: ''
}
},
created () {
this.InitTimer()
},
methods: {
InitTimer () {
var aTimer = new Timer()
aTimer.start({ precision: 'seconds', startValues: { seconds: this.seconds } })
aTimer.addEventListener('secondsUpdated', function (e) {
this.timer = aTimer.getTimeValues().toString()
})
}
}
}
</script>
Aún sigue sin mostrar nada