Javascript Vuejs拼接复制

我正在构建一个编辑器，其中有一个复制函数来复制元素。复制功能的工作原理如下

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);

//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);

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

此代码位于我的应用商店中。此代码将更新应用商店并将其发送回我的vue应用程序

现在发生了以下事情

一个

这行代码在视频版本中已更改

//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);

如您所见，blockId+1在中更改为blockId-1

两个

现在代码如下

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);

//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);

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

如您所见，blockId+1已更改为blockId

三个

在本例中，问题发生在重复2次之后

代码如下

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);

//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);

//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）

如您所见，blockId+1现在是blockId+1

一些最后的音符

当我保存状态并刷新页面时，问题就解决了。我不知道为什么会发生这种情况（我希望它在不刷新页面的情况下工作）。我想做的是，用户可以复制内容，但仍然能够编辑复制的内容，这现在是不可能的

非常感谢您阅读本文，希望您能帮助我：）

大小调整器的工作原理

大小调整器是一个使用工具提示组件编辑其数据的组件，工具提示组件如下所示

image元素请求工具提示（在vuex中通过提交完成）
工具提示显示在图像元素的顶部，并渲染大小调整器栏
更改时，工具提示会将新数据提交到vuex，以便vuex可以将其传递回vue以呈现更改
更改大小调整器的代码

            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)
                }
            });

当您生成
newDataB
时，您给它一个新的
id
，但您的大小提交代码不使用该id；它似乎使用
headerId
、
columnId
和
blockId
来确定哪些块得到更新。由于这些是克隆值，因此将更新原始值和新值

也许
id
应该是
blockId
？
我想我们需要看看调整器的一些代码，特别是它是如何连接到调整大小的东西上的。我要补充一点，我建议不要使用拼接，这可能非常不可预测。相反，使用
slice（）
和
concat（）
可以获得相同的结果。它们都是纯函数，至少可以帮助您排除一些看起来有问题的代码部分