CODEWITHSUNDEEP
javascriptarraysvue.jsvuex
Jeroen
Jeroen

Reputation: 472

Vuejs splice duplicate

I am building a editor where you have a duplicate function to duplicate your elements. The duplicate function works the following 

let newDataB = JSON.parse(JSON.stringify(state.data.content[headerId].content[columnId].content[blockId]));
//Generate a new id
newDataB.id = shortid.generate();

//Generate new id's if the block has childs
if(typeof newDataB.data.data !== 'undefined') {
  if(typeof newDataB.data.data[0] !== 'undefined') {
    newDataB.data.data.forEach((value, key) => {
      newDataB.data.data[key].id = shortid.generate();
    });
  }
}

//blockId is a var which holds the current index of the block in the array
state.data.content[headerId].content[columnId].content.splice(blockId + 1,0,newDataB);

This code is located in my store this updates the store and sends it back to my vue application

Now the following things happens

One

https://www.dropbox.com/s/4nrc9dx0kk2lx02/2017-12-04%2015.55.06.gif?dl=0

this line of code changed in the video version

//blockId is a var which holds the current index of the block in the array
state.data.content[headerId].content[columnId].content.splice(blockId - 1,0,newDataB);

as you can see blockId + 1 is in changed to blockId - 1

Two

https://www.dropbox.com/s/0ees7f7s9plxb3y/2017-12-04%2015.55.53.gif?dl=0

now the code is the following 

//blockId is a var which holds the current index of the block in the array
state.data.content[headerId].content[columnId].content.splice(blockId,0,newDataB);

as you can see blockId + 1 is in changed to blockId

Three

https://www.dropbox.com/s/k316sw85ewkgfhc/2017-12-04%2015.56.47.gif?dl=0

What wired is in this example is that the problem is happening after 2 times duplication

the code is the following 

//blockId is a var which holds the current index of the block in the array

state.data.content[headerId].content[columnId].content.splice(blockId + 1,0,newDataB);

as you can see blockId + 1 is now blockId + 1

Some last notes

The problem is solved when I save my state and then refresh my page. I do not know why this is happening (I want it to work without refreshing the page). What I want to make is that the user can duplicate content but still is able to edit the duplicated content this is now not possible.

Thank you very much for reading this and I hope you can help me :)

How the resizer works

The resizer is a component which edit's its data with the tooltip component that looks the following

  1. The image Element requests a tooltip (done with commit in vuex)
  2. The tooltip shows on top of the image element and renders the resizer bar
  3. On change the tooltip commits the new data to vuex so vuex can pass it back to vue for rendering the changes

Code of the on change resizer

            this.$store.commit(types.CHANGE_BLOCK, {
                headerId: this.headerid,
                columnId: this.columnid,
                blockId: this.blockid,
                blockChildId: 0,
                properties: {
                    height: (this.value < 10 ? this.value + 10 : this.value)
                }
            });

Code of the function in vuex

                        //ADJUSTMENTS BLOCK
                        _.each(data[Object.keys(data)[4]], function(value, key) {
                            state.data[domain][headerId].content[columnId].content[blockId].data[Object.keys(data)[4]][key] = value;
                        });

Upvotes: 0

Views: 517

Answers (1)

Roy J
Roy J

Reputation: 43899

When you generate newDataB, you give it a new id, but your size-committing code doesn't use that; it seems to use headerId, columnId, and blockId to figure out which block(s) get updated. Since those are cloned values, the original and the new will be updated.

Maybe that id is supposed to be blockId?

Upvotes: 1

Related Questions