<Timer :date="'2024-03-21T00:00:00'" />
Сам таймер:
<template>
<div class="timer">
{{ props.date }}
<div class="timer__item">
<span id="days">00</span>
<span class="label">Дней</span>
</div>
<div class="timer__item">
<span id="hours">00</span>
<span class="label">Часов</span>
</div>
<div class="timer__item">
<span id="minutes">00</span>
<span class="label">Минут</span>
</div>
<div class="timer__item">
<span id="seconds">00</span>
<span class="label">Секунд</span>
</div>
</div>
</template>
<script setup>
import { onMounted, defineProps, ref, onUnmounted } from "vue"
const props = defineProps({
date: Date
})
const interval = ref(null)
const targetDate = ref()
onMounted(() => {
targetDate.value = new Date(props.date)
interval.value = setInterval(updateCountdown, 1000)
})
onUnmounted(() => {
clearInterval(interval.value)
})
function updateCountdown() {
const now = new Date()
const remainingTime = targetDate.value - now
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24))
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60))
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000)
document.getElementById('days').innerText = days.toString().padStart(2, '0')
document.getElementById('hours').innerText = hours.toString().padStart(2, '0')
document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0')
document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0')
}
</script>
</style>
почему при изменении даты передаваемой в пропс не обновляется значение в самом компоненте таймера?
