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

此示例中的有线电视是在重复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

最后一些注释

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

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

缩放器如何工作

缩放器是一个使用工具提示组件编辑其数据的组件，该组件看起来如下

图像元素请求工具提示（使用vuex中的提交完成）
工具提示显示在图像元素的顶部并呈现缩放器栏
在更改时，工具提示会将新数据提交给vuex，以便vuex可以将其传递回vue以呈现更改

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

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来确定哪些块得到更新。由于这些是克隆值，原始版本和新版本将被更新。

也许id应该是blockId？

Vuejs拼接重复

1 个答案: