Stop/Start Vue/Crono time clock
-
I’m a Vue and Quasar beginner, and I confess I don’t know what I’m doing some of the time.
I’m trying to use the Vue Chrono plugin from https://www.npmjs.com/package/vue-crono
I’ve been trying to adapt the sample code from that page into a time clock. By adapting the code they supply on that page, I can get it going as a regular clock (as it was written to be), but when I try to use:
this.$cron.stop(methodName) and
this.$cron.start(methodName)to stop and start the clock, I get an error: “Error: Cron method ‘function () { [native code] }’ does not exist and cannot be started.”
If I can learn how to effectively use this.$cron.stop(methodName) and this.$cron.start(methodName), I think I have a chance to make my spa work after a lot more work, but I can’t seem to figure out how to access them correctly.
Here’s my code so far. Any help would be appreciated.
<template> <div class="q-pa-md q-gutter-sm"> <h4 style="text-align: center;"> Time Clock</h4> <h2 style="text-align: center;" :class="this.clockStarted ? 'green' : 'red'" > {{ incrementalTimeCheck }}</h2> <q-btn @click="changeClockState()" @mousedown="timeEnd = Date.now()" rounded icon="av_timer" :label="this.clockStarted ? 'Click to Stop' : 'Click to Start'" stack class="full-width" size="xl" :color="this.clockStarted ? 'green' : 'red'" /> </div> </template> <script> import Vue from 'vue' import crono from 'vue-crono' Vue.use(crono) export default { data () { return { clockStarted: false, label: '', timeStart: Date.now(), timeEnd: 0, timer: 0, time: undefined } }, computed: { incrementalTimeCheck () { var result = '00:00:00' this.timeEnd = this.time if( this.timeEnd > this.timeStart ) { this.timer = this.timeEnd - this.timeStart var milliseconds = parseInt((this.timer%1000)/100) var seconds = parseInt((this.timer/1000)%60) var minutes = parseInt((this.timer/(1000*60))%60) var hours = parseInt((this.timer/(1000*60*60))%24); hours = (hours < 10) ? "0" + hours : hours minutes = (minutes < 10) ? "0" + minutes : minutes seconds = (seconds < 10) ? "0" + seconds : seconds result = hours + ":" + minutes + ":" + seconds } return result } }, methods: { changeClockState () { var handle = 0 this.clockStarted = !this.clockStarted if ( this.clockStarted === false ) { this.$cron.stop(this.load) } else { this.$cron.start(this.load) } }, load(){ this.time = Date.now() } }, mounted(){ this.load() }, cron:{ time: 1000, method: 'load' } } </script> <style> .red { color: red; } .green { color: green; } </style>
-
@omgwalt the error is at your changeClockState method, i’m not sure what params type $cron is expecting since it wasnt stated
this.load
could bethis.load()
or most probably a string'load'
since the lib calls itmethodName
.