push一个元素到数组,结果数组里的其他元素数据全都变成最后push的数据。

代码解释:首先声明一个listx的数组,监听父组件传递过来的 listComplete,存在listComplete就将它push到 listx 数组中。然后将v-for渲染到页面中
在这里插入图片描述
理想中的效果应该是,点击【完成】=> ' 项目2 ' 从未完成列表中删除,并加入到下方已完成列表中。

在这里插入图片描述

但是实际呢?实际上点击加入项目2 后,项目1的内容也变成了项目2
这是因为push的并不是一个值,而是一个地址,数组都指向同一个地址,就好比listx[0]和listx[1]都是指向props.listComplete。每一次push就等同于改变了数组的地址,所以会导致每次都每一元素都变成了最好push的内容。

在这里插入图片描述

解决:每次将要push的数据都存在另外单独开辟的空间中。这样就不会导致,整个数组都是指向一个内存地址。

在这里插入图片描述
或者利用JSON的转换

在这里插入图片描述

现在再试一次呢?完全ok了
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐