Currently, I am executing a loop where each item contains a button with a specific class that is linked to a method. The text displayed on these buttons depends on the value returned by the mentioned method.
HTML Template
<button v-for="(item, index) in items"
:key="index"
:class="isComplete(item.status)"
> {{ text_to_render_based_on_isComplete_result }}
</button>
Method
methods: {
isComplete(status) {
let className
// The logic to determine the className value is more complex but simplified here for this instance
className = logic ? "btn-complete" : "btn-progress"
return className
}
}
The goal is to show "DONE" as the button text if the binded class is "btn-completed", and display "ON-GOING" if it is "btn-in-progress"
Initially, I tried accessing the button in each iteration using event.target, which resulted in undefined.
Another approach suggests creating a new method that identifies all generated buttons, reads their class, and modifies the textContent accordingly.
newMethod() {
const completed = document.getElementsByClassName('btn-done')
const progress= document.getElementsByClassName('btn-progress')
Array.from(completed).forEach( item => {
item.textContent = "DONE"
})
Array.from(progress).forEach( item => {
item.textContent = "PROGRESS"
})
}
However, there might be synchronization issues between this new method and isComplete()