javascript - Vuejs 拼接重复

Question

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

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

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

现在发生以下事情

一个

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

这行代码在视频版本中发生了变化

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

两个

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

现在代码如下

//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 + 1 已更改为 blockId

三

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

这个例子中的wired是在重复2次之后出现的问题

代码如下

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

最后一些注释

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

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

调整大小的工作原理

缩放器是一个使用如下所示的工具提示组件编辑其数据的组件

1. image 元素请求工具提示(通过 vuex 中的提交完成)
2. 工具提示显示在图像元素顶部并呈现调整大小栏
3. 更改时，工具提示会将新数据提交给 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)
                }
            });

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

Answer 1

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

也许 id 应该是 blockId？