Vue.js masih mengemas kini prop walaupun i ialah pembolehubah kaedah

Question

Saya mempunyai kaedah berikut untuk membandingkan dua tatasusunan, satu daripada prop dan satu lagi daripada komponen saya. Saya memasukkan setiap elemen yang wujud dalam tatasusunan props tetapi tidak dalam tatasusunan komponen saya ke dalam tatasusunan ketiga dan menambah harta yang dipanggil "musnahkan: benar" supaya saya boleh menghantarnya ke bahagian belakang Padam daripada pangkalan data.

Walau bagaimanapun, atas sebab tertentu prop saya dikemas kini dan bukannya pembolehubah yang saya gunakan dalam kaedah. Saya tidak pasti mengapa ini berlaku kerana saya tidak merujuk prop secara langsung, tetapi saya menyalin kandungannya ke dalam pembolehubah dalam kaedah.

updateArray(){
        let updatedArray = []
        let oldArray = [...this.props.array]
        oldArray.forEach(element => {
          if(this.componentArray.indexOf(element) > -1){
            updatedArray.push(element)
          }else{
            let newElement = element
            newElement.destroy = true
            updatedArray.push(newElement)
          }
        })
       return updatedArray 
},

Mengapa ini berlaku? Elemen lain dalam komponen saya berfungsi dengan baik, hanya yang ini mempunyai masalah.

Answer 1

Ya, anda sedang menyalin this.props.array elemen tatasusunan ke dalam tatasusunan setempat kaedah baharu, tetapi memandangkan elemen tatasusunan adalah objek, kedua-dua tatasusunan akhirnya mengandungi objek yang sama (rujukan kepada objek )

Anda boleh mencipta let newElement = { ...element }salinan cetek elemen asal menggunakan operator hamparan - ini akan mencipta objek baharu sepenuhnya, menyalin semua sifat objek asal. Tetapi sedar bahawa jika mana-mana sifat objek asal mengandungi tatasusunan/objek, anda akan menghadapi masalah yang sama...hanya lebih mendalam sedikit