Почему не обновляется пропс?

Question

[kot98]

<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>

почему при изменении даты передаваемой в пропс не обновляется значение в самом компоненте таймера?

Comments

[0xD34F]

document.getElementById('days').innerText = days.toString().padStart(2, '0')

Кто вас научил этой мерзости?

[kot98]

0xD34F, навесить рефки на дивы и обращаться к ним?

[0xD34F]

Вопрос был не риторический.

Answer 1

[0xD34F]

почему при изменении даты передаваемой в пропс не обновляется значение в самом компоненте таймера?

Встречный вопрос - почему вы решили, что внутреннее состояние компонента обновляться должно? Покажите, где вы обновляете targetDate при изменении props.date. Нет, можете себя не утруждать - ничего такого у вас нет.

Не надо никакого targetDate, рассчитываем дни-часы-минуты-секунды сразу на основе props.date - так при изменении props.date не придётся предпринимать никаких дополнительных телодвижений, всё посчитается как надо при следующем вызове updateCountdown. Вот как-то так.