vue-countdown is used in the project to implement the countdown. The remaining time of the countdown is obtained from api, but the countdown displayed on the page does not change automatically. The code is as follows:
<vue-countdown :time="countDown" :interval="1000" :auto-start="true" ref="countdown" class="count-down">
<template slot-scope="props">{{ props.days }}{{ props.hours }}{{ props.minutes }}{{ props.seconds }}</template>
</vue-countdown>
<script>
import VueCountdown from "@xkeshi/vue-countdown"
export default {
components: {
VueCountdown
},
data () {
return {
countDown: 0
}
},
created: function () {
axios({
method: "GET",
url: "http://a.b.c",
withCredentials: true,
headers: {"lang": "zh", "token": "", "os": "web", "version": "1.0.0", "time": ""}
}).then((response) => {
let responseData = response.data.data
this.timeLeft = responseData.timeLeft
let now = new Date()
let timer = (this.timeLeft + 0) * 1000
let setNow = new Date(now.getTime() + timer)
this.countDown = setNow - now
this.$refs.countdown.init()
this.$refs.countdown.start()
}).catch((ex) => {
console.log(ex)
})
}
}
</script>the remaining time can be displayed in the page written in this way, but the time will not change by itself. In the above code, if you directly write the value of countDown in return and comment out the countDown assignment in the hook function, the countdown is no problem, and the official document has not found a description of this. I feel that I have something wrong with my operation and ask the boss for advice
.