javascript - Vue memadamkan elemen tatasusunan menyebabkan elemen yang tinggal tidak dapat dipaparkan semula

Question

Saya baru-baru ini menggunakan Vue dalam projek, tetapi semasa proses pembangunan saya mendapati bahawa apabila saya memadamkan elemen dalam tatasusunan, elemen di belakang elemen itu tidak akan dipaparkan semula.

Kod html adalah seperti berikut:
Terdapat dua komponen: satu ialah komponen Utama, digunakan untuk mengandungi semua bekas kandungan;

Kod

js adalah seperti berikut:

Kemudian ada juga kedai Vuex:

Biasanya, apabila memadamkan subbekas, anda sepatutnya boleh menggunakan splice, kaedah tatasusunan yang diganti dalam Vue, untuk memadamkannya.
Contohnya:

   state.Content.splice(i,1);

Tetapi selepas menggunakannya, saya mendapati bahawa selepas memadamkan elemen, elemen di sebalik elemen ini akan dimuatkan semula dan tidak dipaparkan semula, dan logik vue dalam halaman tidak dilaksanakan seperti biasa.

Setelah mencuba pelbagai kaedah, masih tiada penyelesaian Nampaknya apabila elemen dipadamkan, subskrip elemen seterusnya berubah, menyebabkan kandungan dalam elemen dimuat semula tetapi tidak dipaparkan.

Jadi penyelesaian terakhir saya adalah, seperti yang ditunjukkan dalam imej di atas, bukan untuk memadam elemen secara langsung, tetapi menggunakan

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

Kaedah

menetapkan elemen dalam tatasusunan untuk mengosongkan tanpa mengubah susunan tatasusunan, dengan itu akhirnya menyelesaikan masalah.
Tetapi penyelesaian ini hanya boleh merawat simptom tetapi bukan punca, dan tidak dapat menjawab soalan saya dengan baik.
Jadi saya ingin bertanya kepada semua pakar, Adakah ada cara yang lebih baik untuk menyelesaikannya?

Answer 1

Anda cuba mengklon tatasusunan, dan kemudian selepas beroperasi dalam tatasusunan ini, tetapkan tatasusunan ini kepada tatasusunan sebelumnya Ini pasti akan mencetuskan Vue untuk memaparkan semula.

PS: Dengan cara ini, sama ada Vue akan dipaparkan semula bergantung pada sama ada data bergantung telah berubah Oleh itu, jika anda menggunakan kaedah biasa untuk menambah atau memadam data jenis rujukan (Array, Object...), Vue mungkin tidak Perubahan dalam data dikesan. Jadi, anda gunakan kaedah yang saya nyatakan di atas (mudah dan kasar), atau gunakan kaedah seperti this.$set... yang disediakan oleh Vue

Answer 2

Apabila anda memadamkannya, anda boleh cuba menetapkan semula keadaan.Kandungan
Saya biasanya melakukan ini
state.content = state.content.map( e=> {

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

})