[Vuejs]-Vue/Vuex > Cannot track state changed when I use Object.defineProperty() method

by

0👍

✅

This is due to a Javascript limitation — Vue cannot detect changes to an element of an array when done via an index.

But why not just grab the todo item and change it’s done property directly?

var item = state.todolist[payload.index];
item.done = !item.done;

0👍

I am not sure … is this what you want to achieve?

Vuex.Store({
  state: {
    todolist: [
      { todo: 'test1', done: false },
      { todo: 'test2', done: true },
      { todo: 'test3', done: false },
      { todo: 'test4', done: false }
    ]
  },
  mutations: {
    ...
    [Constant.DONE_TOGGLE]: (state, payload) => {
      var val = !state.todolist[payload.index].done
      state.todolist[payload.index] = Object.assign(state.todolist[payload.index], {done: {value: val}})
    },
    ...
  }
})

Leave a comment