Использую 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>
