Reputation: 81
If you go to page 2 and go to page 1 again, the table that disappeared appears in white. disappeared 'element.style {}' is not returned. Is there any way to keep this? I tried to control it by adding a class, but it failed. I think it's probably because it's v-if, not v-show, but I don't know how to properly fix vuesax.
<template #tbody>
<vs-tr
:key="i"
v-for="(exchangedatasT, i) in $vs.getPage(exchangedatas1, page, max)"
:data="exchangedatasT"
class="tableColor"
:class="{
lastDay: todayGo2 !== new Date().toISOString().substring(0, 10),
}"
>
<vs-td
><p>{{ exchangedatasT.Machinecd }}</p></vs-td
>
<vs-td
><p>{{ exchangedatasT.Exchangedt }}</p></vs-td
>
<vs-td
><p>{{ exchangedatasT.ExchangeItemnm }}</p></vs-td
>
<vs-td
><p>{{ exchangedatasT.Specnm }}</p></vs-td
>
<vs-td class="pointer" :id="[`e${i}`]" @click="click2(i)">
<p>
<span :id="[`s${i}`]"></span>
{{ exchangedatasT.CntDay }}
</p>
</vs-td>
<vs-td
><p>{{ exchangedatasT.ExchangeUser }}</p></vs-td
>
<!-- <vs-td>{{ exchangedatasT.Remark }}</vs-td> -->
</vs-tr>
</template>
created() {
const vm = this;
axios
//소모품 항목
.post(``, {
Machinecd: "Test",
Exchangedt: vm.todayGo2,
})
.then((response) => {
const entries = Object.values(response.data);
vm.exchangedatas1 = entries;
console.log(response.data);
for (let i = 0; i < Object.keys(response.data).length; i++) {
this.ExchangeUser = response.data[i].ExchangeUser;
this.CntDay = response.data[i].CntDay;
setTimeout(() => {
if (response.data[i].CntDay == 99999) {
document.getElementById(`e${i}`).style.background = "#ceecc5";
document.getElementById(`e${i}`).style.color = "#176f24";
document.getElementById(
`s${i}`
).innerHTML = `<span>교체 완료 : </span>`;
} else if (response.data[i].CntDay > 20) {
document.getElementById(`e${i}`).style.background = "#ceecc5";
document.getElementById(`e${i}`).style.color = "#176f24";
document.getElementById(
`s${i}`
).innerHTML = `<span>점검 완료 : </span>`;
} else if (response.data[i].CntDay > 10) {
document.getElementById(`e${i}`).style.background = "#ffe079";
document.getElementById(`e${i}`).style.color = "#db751c";
document.getElementById(
`s${i}`
).innerHTML = `<span>미점검 : </span>`;
} else {
document.getElementById(`e${i}`).style.background = "#e96666";
document.getElementById(`e${i}`).style.color = "#ffffff";
document.getElementById(
`s${i}`
).innerHTML = `<span>미점검 : </span>`;
}
}, 1);
}
})
.catch((error) => {
console.error(error);
});
},
Upvotes: 0
Views: 41