Kelin2025 / vue-timers

Mixin to manage your intervals in Vue.js
MIT License
231 stars 17 forks source link

Dynamic Timers #57

Open go4cas opened 4 years ago

go4cas commented 4 years ago

I am trying to create a number of dynamic timers in the mounted lifecycle event of a component:

  mounted() {
    if (this.jobs) {
      for (let job of this.jobs) {
        this.$store.dispatch(`dashboard-${this.id}/LOAD_DATA`, { elementId: job.name, service: job.service })
        if (job.refresh && job.refresh.interval) {
          this.timers[`${this.id}-${job.name}`] = {
            name: `${this.id}-${job.name}`,
            time: job.refresh.interval,
            autostart: false,
            repeat: true,
            callback() {
              this.$store.dispatch(`dashboard-${this.id}/LOAD_DATA`, { elementId: job.name, service: job.service })
            }
          }
          console.log(this.timers)
          this.$timer.start(`${this.id}-${job.name}`)
        } else {
          this.$timer.stop(`${this.id}-${job.name}`)
        }
      }
    }
  },

But, when it gets to the $timer.start() call, I get the following: "[vue-timers.start] Cannot find timer tal-cs-tier1-callsInbound". The console.log(this.timers)shows that the timer object exists. I have tired both object notation and array.

go4cas commented 4 years ago

Okay, it seems the issue is with the callback. I can only get it to work if the method has the same name as the timer. Is there any way around this.

My use case is: I pass in a collection of jobs, so I want to dynamically create a timer for each job, with its own name, and then use a common method as a callback. Is this possible?

masongzhi commented 4 years ago

dynamically create a timer after init vue that its not currently supported