• 【Vue】删除数组元素,导致剩余元素被重新渲染


    最近在项目中有使用Vue,然而在开发过程中发现,当我对数组中的元素进行删除时,会导致该元素后面的元素没有被重新渲染。

    html代码如下:
    有两个组件:一个是Main组件,用来包含所有的内容容器;一个是子组件,用来显示内容。
    clipboard.png

    js代码如下:
    clipboard.png

    然后还有一个Vuex的store:

    clipboard.png

    正常来说,在删除子容器时,应该可以直接使用vue中数组的重写方法splice进行删除。如:

    state.Content.splice(i,1);

    但是使用后发现,在删除元素后,这个元素后面的元素会被重新加载,并且没有被重新渲染,页面中的vue逻辑没有被正常执行。

    尝试过多种方式后还是没有解决,感觉应该是当元素被删除后,后面元素的下标发生变化,导致元素中的内容被重新加载,但又没有被渲染。

    因此我最终的解决方案是,如上图中所示,不直接删除元素,而是使用

    state.Content.splice(i,1,null);

    的方式将数组中的元素设置为空,但又不改变数组的排列方式,从而最终解决问题。
    但是这种解决方式只能说治标不治本,并不能很好的解答我的疑问。

  • 相关阅读:
    python 面向对象(三大特性)
    python 发红包
    python 计算器
    python 模块和包
    python 异常处理
    python 序列化模块
    python 常用模块
    esriSRGeoCS3Type Constants
    esriSRGeoCS2Type Constants
    esriSRGeoCSType Constants
  • 原文地址:https://www.cnblogs.com/nonkicat/p/6877032.html
Copyright © 2020-2023  润新知