I decided to create a list of items with checkboxes. The goal was to tick the checkbox and add a class to the div upon clicking it.
Unfortunately, when I click on the checkbox, it only ticks the checkbox itself. I actually need to click it again for the class to be changed. Below is the code snippet:
<div class="todo-item" v-bind:class="{'is-complete': todo.completed}">
<p>
<input type="checkbox" v-model="todo.completed" v-on:change="markComplete">
{{ todo.title }}
</p>
</div>
Here's the method being used:
methods: {
markComplete() {
this.todo.completed = !this.todo.completed
}
Any insights into why this behavior might be occurring?