Currently, my vue function involves using nested v-for loops to iterate through an object and create a table with rows and cells. While this method is effective, I am now faced with the challenge of implementing a v-if statement in the innermost loop to consider the `discarded` value for conditional styling.
Specifically, I need to examine the `tests.discarded` value for each `td` element and based on whether it is greater than 0, assign either a red or green color to the cell.
Is there a way to achieve this within the existing structure of my code? It seems that using a v-if within the innermost v-for loop is not a feasible option.
namestest: [
name: "john",
date: "08/12/21",
discarded: 4,
count: 19
]
<tr v-for="(tests, name) in namestest" :key="name">
<td>@{{ name }}</td>
// For each iteration, we need to check if the discarded value is greater than 0 and then apply the appropriate styling
<td v-for="date in dates" :key="date">@{{ tests[date] && tests[date].count }}</td>
</tr>