[Vuejs]-Vuex getter for filter not updating after mutating array of state

by

0👍

✅

I discovered that the problem had nothing to do with getters or state. Both were being updated correctly in the three ways that I tried.

The problem was in the Todo component. Previously, the code was something like this:

// in the template 
        <label class="todo-action" :for="`todo-checked-${id}`">
            <input type="checkbox" v-model="completed" 
                   :id="`todo-checked-${id}`" @change="update">
        </label>

        <div class="todo-title">
            {{title}}
        </div>

// inside script tag
    data() {
        // this allow me to access this.id, this.completed, and this.title 
        // instead of this.todo.id, this.todo.completed, and this.todo.title
        return this.todo;
    },

The problem is that data was not being updated. I fixed it as follows

// in the template I access the props from the todo item, so it is always up to date
        <label class="todo-action" :for="`todo-checked-${todo.id}`">
            <input type="checkbox" v-model="todo.completed" 
                   :id="`todo-checked-${todo.id}`" @change="update">
        </label>

        <div class="todo-title">
            {{todo.title}}
        </div>

Yeah, it was a very simple solution

Leave a comment