Apologies for my code, I am still learning Vue.
I have 5 span items set up like this [span with :class]
<span class="bars">
<span class="bar" :class="{ selected1: isActive[0] }"></span>
<span class="bar" :class="{ selected2: isActive[1] }></span>
<span class="bar" :class="{ selected3: isActive[2] }></span>
<span class="bar" :class="{ selected4: isActive[3] }></span>
<span class="bar" :class="{ selected5: isActive[4] }></span>
</span>
These correspond to 5 grey circles. The classes 'selected1, selected2, ...' fill the circles with different colors. The "isActive" array consists of 5 boolean variables [false, false, false, false, false]. A function is used to update these boolean variables each time data is received from Firebase.
data() {
return {
isActive: [], // boolean array
ricettario: [] // firebase data array
};
},
So when isActive[0] is true, the first span is filled, and so on...
The function responsible for updating isActive[] is called "setDiff" which retrieves data from Firebase Database and processes it through a switch statement.
// Get data from Firebase
created() {
db.collection("ricettarioFirebase")
.get()
.then(snapshot => {
snapshot.forEach(doc => {
let recipe = doc.data();
recipe.date = dayjs(recipe.date)
.locale("it")
.format("D MMMM YYYY");
this.setDiff(recipe.diff);
this.ricettario.push(recipe);
});
});
}
// Function to update isActive[]
methods: {
setDiff(diff) {
switch (diff) {
case "molto facile":
i = 1;
for (j = 0; j < i; j++) {
this.isActive[j] = true;
}
break;
case "facile":
i = 2;
for (j = 0; j < i; j++) {
this.isActive[j] = true;
}
break;
case "medio":
i = 3;
for (j = 0; j < i; j++) {
this.isActive[j] = true;
}
break;
case "difficile":
i = 4;
for (j = 0; j < i; j++) {
this.isActive[j] = true;
}
break;
case "molto difficile":
i = 5;
for (j = 0; j < i; j++) {
this.isActive[j] = true;
}
break;
}
}
}
The issue here is that the DOM only displays the last updated state, causing all cards created with v-for to have the same span color. The goal is to have each card with different filled spans. The problem can be seen in the following image. problem