As I delve into learning Vue Js, I have been working on a simple todo app.
One interesting thing I've done is binding a class to my todo items based on whether todo.completed is true or not:
<a v-bind:class="{iscomplete : todo.completed}">
<input type="checkbox" v-on:change="markComplete" />
The iscomplete class simply adds a line through text decoration.
When the checkbox is clicked, it triggers the following method:
methods: {
markComplete() {
this.todo.completed = !this.todo.completed;
}
This approach works well for existing todos within the DOM. However, when new todos are added, the dynamic class binding stops functioning properly.
I even created a short gif to showcase this issue.
Despite my efforts, I haven't been able to find a solution. It's possible that my limited experience with Vue is hindering my search for answers. If this has been discussed before and I missed it, I apologize.
Could someone shed some light on why this might be happening?https://i.sstatic.net/1fNKC.gif