javascript - Vue supprime les éléments du tableau, empêchant ainsi le rendu des éléments restants

Question

J'ai récemment utilisé Vue dans un projet, mais au cours du processus de développement, j'ai découvert que lorsque je supprime un élément du tableau, les éléments derrière l'élément ne seront pas restitués.

Le code html est le suivant :
Il y a deux composants : l'un est le composant principal, utilisé pour contenir tous les conteneurs de contenu ; l'autre est le sous-composant, utilisé pour afficher le contenu.

Le code

js est le suivant :

Ensuite, il y a aussi un magasin Vuex :

Normalement parlant, lors de la suppression d'un sous-conteneur, vous devriez pouvoir utiliser directement splice, la méthode remplacée des tableaux dans Vue, pour le supprimer.
Par exemple :

   state.Content.splice(i,1);

Mais après l'avoir utilisé, j'ai découvert qu'après la suppression d'un élément, les éléments derrière cet élément seront rechargés et non restitués, et la logique de vue dans la page n'est pas exécutée normalement.

Après avoir essayé différentes méthodes, il n'y a toujours pas de solution. Il semble que lorsque l'élément est supprimé, l'indice de l'élément suivant change, provoquant le rechargement du contenu de l'élément mais pas son rendu.

Ma solution finale était donc, comme le montre l'image ci-dessus, de ne pas supprimer l'élément directement, mais d'utiliser

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

La méthode

définit les éléments du tableau comme vides sans modifier la disposition du tableau, résolvant ainsi finalement le problème.
Mais cette solution ne peut traiter que les symptômes mais pas la cause profonde, et ne peut pas très bien répondre à mes questions.
Je voudrais donc demander à tous les experts : Y a-t-il une meilleure façon de résoudre ce problème ?

Answer 1

Vous essayez de cloner le tableau, puis après avoir opéré dans ce tableau, attribuez ce tableau au précédent. Cela déclenchera certainement le nouveau rendu de Vue.

PS : À propos, le rendu de Vue dépend de la modification ou non des données dépendantes. Ainsi, si vous utilisez des méthodes ordinaires pour ajouter ou supprimer des données de type référence (Tableau, Objet...), Vue peut ne pas le faire. Les changements dans les données sont détectés. Vous utilisez donc la méthode que j'ai mentionnée ci-dessus (simple et grossière), ou utilisez des méthodes telles que this.$set... fournies par Vue

.

Answer 2

Lorsque vous le supprimez, vous pouvez essayer de réattribuer state.Content
Je fais habituellement cela
state.content = state.content.map( e=> {

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

})