Currently, I'm working on a small project diving into Vue js - a Habittracker. Unfortunately, there is a bug in my code. When the page is reloaded and new habits are added, the function that should change the background doesn't work as expected.
This link shows the bug. Here's a glimpse of how my array is structured:
0
:
{id: 0, title: "1", ready: false}
1
:
{id: 1, title: "123", ready: false}
2
:
{id: 2, title: "123", ready: false}
3
:
{id: 0, title: "123", ready: true}
The reason behind this issue lies in using a counter to assign the id, which resets to 0 upon reloading.
<div class="q-pa-md" v-for="(habit, index) in habits" :key="habit.id">
<q-card class="my-card" :id="habit.id" ref="card">
<q-card-section>
<q-checkbox
id="checkbox"
v-model="habit.ready"
@click="changeToTransparent(habit)"
>
</q-checkbox>
{{ habit.title }}
<q-btn-dropdown flat class="more" icon="more_horiz">
<q-list>
<q-item clickable v-close-popup @click="deletehabit(index)">
<q-item-section>
<q-item-label>Delete</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="edithabitbutton(index)">
<q-item-section>
<q-item-label>Edit</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</q-card-section>
</q-card>
<div>
let counter = 0;
const habits = ref([]);
const addHabit = () => {
habits.value.push({ id: counter++, title: habittitle.value, ready: false });
savetolocalstorage();
habittitle.value = "";
};
const changeToTransparent = (habit) => {
if(document.getElementById(habit.id) != null) {
if (habit.ready) {
document.getElementById(habit.id).style.backgroundColor =
"rgba(170,193,200,0.25)";
savetolocalstorage();
} else {
document.getElementById(habit.id).style.backgroundColor = "";
savetolocalstorage();
}
}
}
Do you have any suggestions or tips on how to tackle this problem?