Timer not starts when using dynamic start-time and end-time

[PrajapatiDhara1510]

I am assigning start-time and end-time dynamically to the plugin.

I am using firebase and on the response, I am assigning the values. See my below code.

This is my code to use firebase call

const auctionRef = this.$fire.firestore.collection('auctions')
const loadInitial = await auctionRef.where('auction_id', '==', parseInt(this.auctionNumber)).get()
        if (!loadInitial.empty) {
         loadInitial.forEach((doc) => {
            const values = doc.data()
            this.startTime = new Date(values.startTime).getTime()
            this.endTime = new Date(values.endTime).getTime()
            this.$refs.countdownTimer.startCountdown(true) 
          })
        }

Component

               <client-only>
                    <vac
                      ref="countdownTimer"
                      :start-time="startTime"
                      :end-time="endTime"
                      :autoStart="false"
                      @process="(vac) => process(vac)"
                      @finish="(vac) => finish(vac)"
                    >
                      <span
                        slot="process"
                        slot-scope="{ timeObj }"
                      >{{ `Lefttime: ${timeObj.m}:${timeObj.s}` }}</span>
                      <span slot="finish">Done!</span>
                    </vac>
                  </client-only>

I am not getting what is the issue with this initialization. If I assign static values to the start-time and end-time with the same data as api then it is working.

Also I will need to increase endtime with 10 seconds in between. How to do that?

[chkalovec-spec]

@dhara15101991 Try this:

this.startTime = new Date(values.startTime).getTime()
this.endTime = new Date(values.endTime).getTime()
await nextTick()
this.$refs.countdownTimer.startCountdown(true) 

In a similar situation nextTick helped me.