javascript - Vue删除数组元素，导致剩余元素没有被重新渲染

Question

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

html代码如下：
有两个组件：一个是Main组件，用来包含所有的内容容器；一个是子组件，用来显示内容。

js代码如下：

然后还有一个Vuex的store：

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

   state.Content.splice(i,1);

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

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

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

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

的方式将数组中的元素设置为空，但又不改变数组的排列方式，从而最终解决问题。
但是这种解决方式只能说治标不治本，并不能很好的解答我的疑问。
因此我想请问各位大神，有没有什么更好的方式可以解决？

Answer 1

你试试clone一下数组,然后在这个数组里操作后把这个数组赋值给之前那个. 这样一定会触发Vue的重新渲染.

PS : 顺便一提,Vue会不会重新渲染根据的是依赖的数据有没有变化.所以,如果你用普通方法增删引用类型的数据(Array,Object...),Vue可能不会检测到数据的变化.So,你用上面我说的那个方法(简单粗暴),或者用Vue提供的this.$set...之类的方法.

Answer 2

你删除的时候，可以尝试重新给state.Content赋值
我一般是这么做
state.content = state.content.map( e=> {

if(e.id !==x) return e 

})