Tengo un mixin que devuelve el tiempo restante en este formato HH:mm:ss .
Vue.mixin({ methods: { remainingTime(){ // some calculations based on current time and given time return timeLeft.toString(); } ....en componente, llamo al mixin para obtener el tiempo
export default { .... data() { return { timeLeft: this.remainingTime(), .... y en mi plantilla lo llamo {{timeLeft}} que devuelve algo así como 01:20:33 pero quiero mostrar este valor como una cuenta regresiva. Entonces, en el momento en que se carga en la página, comienza la cuenta regresiva de 1 segundo.
Intenté usar un observador pero no funciona:
watch: { timeLeft: { handler(value) { if (value) { setInterval(() => { this.timeLeft; }, 1000); } }, immediate: true, }, },Mantenga el tiempo con un valor numérico. Tiempo presente con un valor de cadena. El trabajo del observador es notar cambios en el tiempo numérico y convertirlo en una cadena.
Definitivamente no es el trabajo de un observador establecer Intervalo (). Terminarás comenzando nuevos temporizadores de cualquier manera.
Vue.config.productionTip = false; Vue.config.devtools = false; var app = new Vue({ el: '#app', data: { timeLeft: 0, timeLeftString: '', timer: null }, watch: { timeLeft: function (val) { const timeZero = moment("1900-01-01 00:00:00"); this.timeLeftString = timeZero.add(val, 'seconds').format("HH:mm:ss") }, }, mounted() { this.timeLeft = 63; this.timer = setInterval(() => { if (this.timeLeft <= 0) { clearInterval(this.timer); alert('Done'); } else { this.timeLeft-- } }, 1000) } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h1> {{ timeLeftString }} </h1> </div>Sin momentjs: puede usar mod (%) para extraer minutos de hora y fecha. Código tomado del artículo al final de esta publicación. Ejecute setInterval mounted o cada vez que obtenga datos para la fecha límite
let countDownDate = new Date("Jan 01, 2023 00:00:00").getTime(); // The deadline let x = setInterval(() => { let now = new Date().getTime(); let distance = countDownDate - now; let days = Math.floor(distance / (1000 * 60 * 60 * 24)); let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((distance % (1000 * 60)) / 1000); console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s"); // Countdown output if (distance < 0) { clearInterval(x); console.log("Too late!") // Text at the end of the countdown } }, 1000)Puede consultarlo aquí https://beetrootacademy.se/blog/front-end-development/js-countdown-timer-14-lines