Vuejs拼接重复答案

【问题标题】：Vuejs splice duplicateVuejs拼接重复
【发布时间】：2018-05-18 02:20:07
【问题描述】：

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

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 以呈现更改

更改大小调整器的代码

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

【问题讨论】：

我认为我们需要查看一些调整大小的代码，特别是它是如何附加到调整大小的。
我要添加它
我建议不要使用拼接，它可能非常难以预测。相反，使用slice() 和concat() 来获得相同的结果。它们都是纯函数，至少可以帮助您排除某些看起来有问题的代码部分

标签： javascript arrays vue.js vuex

【解决方案1】：

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

也许id 应该是blockId？

【讨论】：