<vs-tr :key="i" v-for="(daydatasT, i) in daydatas">
<vs-td>{{ daydatasT.Machinecd }}</vs-td>
<vs-td>{{ daydatasT.Checkdt }}</vs-td>
<vs-td>{{ daydatasT.CheckItemnm }}</vs-td>
<vs-td>{{ daydatasT.CheckPart }}</vs-td>
<vs-td :id="[`d${i}`]">
</vs-td>
<vs-td></vs-td>
<!-- <vs-td>{{ Checker }}</vs-td> -->
<!-- <vs-td>{{ tr.CheckUser }}</vs-td> -->
<vs-td>{{ daydatasT.Remark }}</vs-td>
</vs-tr>
const vm = this;
axios
.post("~~~")
.then((response) => {
// console.log("response.data : " + JSON.stringify(response.data));
vm.daydatas = response.data;
// console.log(response.data[i].Checkresult);
for (let i = 0; i < 10; i++) {
if (response.data[i].Checkresult == "1") {
document.getElementById(`d${i}`).style.background = "#e96666";
document.getElementById(`d${i}`).style.color = "#ffffff";
} else {
document.getElementById(`d${i}`).style.background = "#ceecc5";
document.getElementById(`d${i}`).style.color = "#176f24";
}
}
})
.catch((error) => {
console.error(error);
});
https://i.sstatic.net/BgEYe.png
If I change the ID, it works, but the styling does not apply to the IDs created by the for loop. While checking if the names were different using the console, they appear to be the same. Why is the styling not working as expected?