Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

vue js 2 data değerinin otomatik değişmesi

caglar_kocak

var x = new vue({
el:'#root',
data:{
    books:[ ],
    booksBackUp:[ ],
},
methods:{
    getBooks(){
        ......... // burada axios ile kitap isimlerini alıyorum ve 
         response.data = this.books ve 
         response.data = this.booksBackUp olarak atıyoruz.
    },
    addBooks(item){
       this.books.push(item);
    }
},
})

yukarıda belirttiğim örnekte addBooks() fonksiyonu çağırıldığında sadece data içerisindeki books üzerinde değişiklik yapmama rağmen booksBackUp üzerinde de değişiklik oluyor. yani her türlü bir şekilde books ile booksBackUp ı birbirine eşitliyor. Bunun sebebi nedir ? Nasıl buna engel olabilirim ?

mgsmus

caglar_kocak Neden this.books = response.data değil de tersi?

caglar_kocak

mgsmus orayı yanlış yazmışım ya.. doğrusu sizin dediğiniz gibi ama yine de aynı sorun yaşanıyor.

mgsmus

caglar_kocak Anladım. Javascrit'de bir değişkeni bir objeye eşitlediğinizde aslında referans oluşturmuş oluyorsunuz. O yüzden referans olsun istemiyorsanız objeyi dondurmanız lazım ya da string boolean vs gibi basit tipe dönüştürmeniz lazım. Mesela

this.booksBackUp = JSON.parse(JSON.stringify(response.data))

gibi.

caglar_kocak

mgsmus peki response dan gelen değer bir Set objesi olsaydı nasıl yapardım ? bu örnek de böyle bir durum yok ama mesela axios dan değil de başka bir yerden dönen değeri bu iki değişkene eşitlemeye çalışsaydım nasıl yapabilirdim ?

caglar_kocak

caglar_kocak mgsmus Object.freeze mi kullanmam gerekiyor ?

caglar_kocak

mgsmus

var mySet   =   new Set(["10","abc"]);

    var mySet1  =   mySet;
    var mySet2  =   mySet;

    mySet1.add('abcd');
    console.log(mySet1);
    console.log(mySet2);

bu tarz bir durum söz konusu. mySet2 değişsin istemiyorum. Ama bu örnekte de değişiyor.

mgsmus

caglar_kocak Cevabı yazdım. Object.freeze() olmaz, o da mutable çalışır ve bu sefer iki değişkeninizi de dondurur. Objeyi dondurmak derken Object.freeze() kastetmemiştim, sadece isim benzerliği.

const mySet = new Set(["10", "abc"]);

const mySet1 = mySet;
const mySet2 = JSON.parse(JSON.stringify(mySet));

mySet1.add('abcd');

console.log(mySet1);
console.log(mySet2);

mgsmus

caglar_kocak Şöyle de yapabilirsiniz:

Object.assign(response.data, this.books)
Object.assign(response.data, this.booksBackUp)

ya da

this.books = response.data
this.booksBackUp = {...this.books}

caglar_kocak

mgsmus Çok çok teşekkür ederim. Olayın mantığını bilmiyordum. Sayenizde çok şey öğrendim.