using vue.set in vuex is not updating the state

Question

I'm trying to add an object into a nested array, and it is not working, but I've used this for other states and it works fine.

Has it got something to do with it begin a nested array?

this is the code I'm using

Vue.set(state.sections[getCurrentSection(state).index].rows[getCurrentRow(state).index].columns[getCurrentColumn(state).index].elements, 0, element)

this is the element object

var element = {
    id: id,
    style: {
        backgroundColor: {
            value: 'rgba(255,255,255,1)',
        },
    },
}

what am I doing wrong?

yeah its because you are using a nested array. Vue can't detect the change to that index of state.sections — thanksd
– thanksd, Commented Jul 19, 2017 at 18:31
Without being able to see any of your vuex module, my advice would be to change your data model from a nested array — thanksd
– thanksd, Commented Jul 19, 2017 at 18:42
ok, that sounds like a pretty round-about way of doing it, but if you're happy I'm happy — thanksd
– thanksd, Commented Jul 19, 2017 at 18:44
state.sections[getCurrentSection(state).index].rows[getCurrentRow(state).index].columns[getCurrentColumn(state).index] Wut. — Stephan-v
– Stephan-v, Commented Jul 20, 2017 at 9:16

Jonatas Walker · Accepted Answer · 2020-04-19 14:38:57Z

3

UPDATE

Another option to clone:

function hasProp(arg1, arg2) {
  return Object.prototype.hasOwnProperty.call(arg1, arg2);
}

function extend(arg1, arg2) {
  const keys = Object.keys(arg2);
  const len = keys.length;

  let i = 0;

  while (i < len) {
    arg1[keys[i]] = arg2[keys[i]];
    i += 1;
  }

  if (hasProp(arg2, 'toString')) {
    arg1.toString = arg2.toString;
  }

  if (hasProp(arg2, 'valueOf')) {
    arg1.valueOf = arg2.valueOf;
  }

  return arg1;
}

const obj1 = {
  a: 1,
  b: 2,
  c: { a: 1, b: 2}
};

const cloned = extend({}, obj1);
cloned.a = 9999;

console.log(obj1, cloned);

Make a deep copy of your state.sections;
Create a new object and make your modifications on it;
Replace state.sections with you new object - state.sections = Object.assign({}, newObject).

Your state and your view updated.

edited Apr 19, 2020 at 14:38

answered Sep 23, 2017 at 12:03

Jonatas Walker

14.3k6 gold badges57 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using vue.set in vuex is not updating the state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related