[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }": "Error: [vuex] Do not mutate vuex store state outside mutation handlers."



  • I use a List for rendering my todos, which are managed with vuex. Im not sure why i got this error.

     <q-list inset-separator>
          <q-item
            v-for="(todo, key, index) in todos"
            :key="todo.id"
            name="myTodos">
            <q-item-side>
              <q-checkbox color="secondary" v-model="todo.done" @change="changeTodo(todo.id)" />
            </q-item-side>
            <q-item-main :label="todo.todo" />
            <q-item-side right icon="more_vert">
              <q-popover ref="popover">
                <q-list link>
                  <q-item @click="removeTodo(todo.id)">
                    <q-item-main label="Delete" />
                  </q-item>
                </q-list>
              </q-popover>
            </q-item-side>
          </q-item>
        </q-list>
    

    Here is my method which calls the vuex action:

     changeTodo (todo) {
       this.selectedTodo = this.todos[todo]
       this.updateTodo(this.selectedTodo)
     },
    

    Here i get the state:

     computed: {
        ...mapState({
          'todos': state => state.todos.todos
       })
      },
    

    Vuex and app works fine and also the state is updated but i got this error too.



  • The problem is in v-model=“todo.done”. What did i wrong?



  • I replaced

     v-model="todo.done"
    

    with

      :value="todo.done".
    

    Now it works fine. But when do i use/need v-model?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.