javascript – Vue löscht Array-Elemente, was dazu führt, dass verbleibende Elemente nicht erneut gerendert werden

Question

Ich habe Vue kürzlich in einem Projekt verwendet, aber während des Entwicklungsprozesses habe ich festgestellt, dass die Elemente hinter dem Element nicht neu gerendert werden, wenn ich ein Element im Array lösche.

Der HTML-Code lautet wie folgt:
Es gibt zwei Komponenten: eine ist die Hauptkomponente, die alle Inhaltscontainer enthält, die andere ist die Unterkomponente, die zum Anzeigen von Inhalten verwendet wird.

Der

js-Code lautet wie folgt:

Dann gibt es auch einen Vuex-Store:

Normalerweise sollten Sie beim Löschen eines Untercontainers in der Lage sein, Splice, die überschriebene Methode von Arrays in Vue, direkt zu verwenden, um ihn zu löschen.
Zum Beispiel:

   state.Content.splice(i,1);

Aber nach der Verwendung habe ich festgestellt, dass nach dem Löschen eines Elements die Elemente hinter diesem Element neu geladen und nicht erneut gerendert werden und die Vue-Logik auf der Seite nicht normal ausgeführt wird.

Nach dem Ausprobieren verschiedener Methoden gibt es immer noch keine Lösung. Es scheint, dass sich beim Löschen des Elements der Index des nachfolgenden Elements ändert, was dazu führt, dass der Inhalt im Element neu geladen, aber nicht gerendert wird.

Meine endgültige Lösung bestand also, wie im Bild oben gezeigt, darin, das Element nicht direkt zu löschen, sondern

zu verwenden

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

Die

-Methode setzt die Elemente im Array auf leer, ohne die Anordnung des Arrays zu ändern, und löst so letztendlich das Problem.
Aber diese Lösung kann nur die Symptome, nicht aber die Grundursache behandeln und kann meine Fragen nicht sehr gut beantworten.
Deshalb möchte ich alle Experten fragen: Gibt es einen besseren Weg, das Problem zu lösen?

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 

})