CODEWITHSUNDEEP
vue.jsvuex
Dan
Dan

Reputation: 15

using vue.set in vuex is not updating the state

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?

Upvotes: 0

Views: 4066

Answers (1)

Jonatas Walker
Jonatas Walker

Reputation: 14150

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);
  1. Make a deep copy of your state.sections;
  2. Create a new object and make your modifications on it;
  3. Replace state.sections with you new object - state.sections = Object.assign({}, newObject).

Your state and your view updated.

Upvotes: 3

Related Questions