Почему не происходит перерендеринг страницы при изменения значения объекта?

Question

[Daniil]

Использую Vue3. Изменяю объект, но не происходит перерендеринг страницы. Изменяется dateTimeLocal.day. Почитал, пишут что Vue не может отслеживать изменения в объекте. Но как исправить это не понял.

<template>
  <div class="timer_main">
    <div class="inputBlock">
      <input
        type="datetime-local"
        class="inputDateTime"
        v-model="inputDateTimeValue"
        step="1"
      />
      <button @click="dayCounter" class="btnStart">Запустить</button>
    </div>
    <div class="day" ref="dayScroll">
      <span
        class="item"
        v-for="(day, index) in dateTimeLocal.day"  // должно измениться здесь
        :key="index"
        >{{ day }}</span
      >
    </div>
    <div>:</div>
    <div class="hour">
      <span
        class="item"
        v-for="(hour, index) in dateTimeLocal.hour"
        :key="index"
        >{{ hour }}</span
      >
    </div>
    <div>:</div>
    <div class="minute">
      <span
        class="item"
        v-for="(minute, index) in dateTimeLocal.minute"
        :key="index"
        >{{ minute }}</span
      >
    </div>
    <div>:</div>
    <div class="second">
      <span
        class="item"
        v-for="(second, index) in dateTimeLocal.second"
        :key="index"
        >{{ second }}</span
      >
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Timer",
  setup() {
// использую для отрисовки цифр времени
    const dateTimeLocal = {
      day: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
      hour: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
      minute: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
      second: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
    };

    const inputDateTimeValue = ref(null);

    const dateTimeMoment = [];
    const dateTimeValue = [];
    const dateTimeDifference = [];

    const dayScroll = ref(null);

    const dayCounter = () => {
      let date = new Date();
      let allTime = 0;
 
      dateTimeMoment[0] = date.getFullYear();
      dateTimeMoment[1] = date.getMonth() + 1;
      dateTimeMoment[2] = date.getDate();
      dateTimeMoment[3] = date.getHours();
      dateTimeMoment[4] = date.getMinutes();
      dateTimeMoment[5] = date.getSeconds();
      
      dateTimeValue[0] = parseInt(inputDateTimeValue.value.slice(0, 4));
      dateTimeValue[1] = parseInt(inputDateTimeValue.value.slice(5, 7));
      dateTimeValue[2] = parseInt(inputDateTimeValue.value.slice(8, 10));
      dateTimeValue[3] = parseInt(inputDateTimeValue.value.slice(11, 13));
      dateTimeValue[4] = parseInt(inputDateTimeValue.value.slice(14, 16));
      dateTimeValue[5] = parseInt(inputDateTimeValue.value.slice(17, 19));
      
      for (let i = 0; i < dateTimeValue.length; i++) {
        dateTimeDifference[i] = dateTimeValue[i] - dateTimeMoment[i];
      }
      /*пересчёт времени в секунды */
      allTime += dateTimeDifference[0] * 31540000;
      allTime += dateTimeDifference[1] * 2628000;
      allTime += dateTimeDifference[2] * 86400;
      allTime += dateTimeDifference[3] * 3600;
      allTime += dateTimeDifference[4] * 60;
      allTime += dateTimeDifference[5];
   
      for (let i = 0; i < allTime / 86400; i++) {
        // dateTimeLocal.day[i] = i;
        let n = Math.trunc(allTime / 86400).toString().length;
        if (i.toString().length < n) {
          for (let k = 0; k < n; k++) {
            let j = ""; 
            for (let d = 0; d < n - i.toString().length; d++) {
              j = "0" + j.toString();
            }
            dateTimeLocal.day[i] = j + i;   // изменяю значение
          }
        }
      }
      console.log(dateTimeLocal.day);
    };

    const getInputDateValue = () => {};

    const getInputTimeValue = () => {};

    return {
      dateTimeLocal,
      dayScroll,
      dayCounter,
      inputDateTimeValue,
      dateTimeMoment,
      dateTimeValue,
      dateTimeDifference,
      getInputDateValue,
      getInputTimeValue,
    };
  },
};
</script>

Answer 1

[Aetae]

Ну ёпрст.

const dateTimeLocal = reactive({
  day: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
  hour: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
  minute: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
  second: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
});

P.S. Это Vue 2 не мог отслеживать добавление новых ключей, Vue 3 же может всё, если не забыть его об этом попросить.

Comments

[Daniil]

Понял , спасибо.