I am currently working on a to-do list app and facing a challenge with assigning classes based on boolean values. Although I have successfully achieved this using v-bind:class for some classes, I am now struggling to do the same for another boolean simultaneously.
Here is my current code:
<div
v-bind:class="[task.checked ? '!bg-gray-800 text-gray-600 line-through' : 'none']"
v-bind:class="[task.checked ? '!bg-gray-800 text-gray-600 line-through' : 'none']"
class="tasks_container grid grid-cols-10"
v-for="task in tasks"
>
<!-- task for loop -->
</div>
data() {
return {
note_text: ' ',
tasks: [
{
text: 'hello',
checked: false,
selected: true
},
{
text: 'world',
checked: false,
selected: false
}
]
};
},
In an attempt to address this issue, I tried using :
<div
v-bind:class="[task.checked ? '!bg-gray-800 text-gray-600 line-through' : 'none']"
v-bind:class="[task.selected ? '!bg-gray-100' : 'none']"
class="tasks_container grid grid-cols-10"
v-for="task in tasks"
>
<!-- task for loop -->
</div>
This approach failed because it is not possible to have multiple v-bind:class.
I also experimented with:
<div
v-bind:class="[task.checked?'!bg-gray-800 text-gray-600 line-through':'none'], ['task.selected? !bg-gray-100':'none']"
v-for="task in tasks"
>
<!-- task for loop -->
</div>
Unfortunately, this did not work as well, although I cannot recall the specific reason why. If there are any errors in my code, please feel free to point them out. I am new to stackoverflow and would appreciate any help. Thank you!