Kaedah pelaksanaan fungsi akses harta dalam tatasusunan objek dalam dokumen Vue

Vue ialah rangka kerja JavaScript yang popular untuk membangunkan aplikasi halaman tunggal (SPA). Vue menyediakan banyak kaedah mudah untuk bekerja dengan data. Apabila kita menggunakan Vue untuk menangani tatasusunan objek, kita selalunya perlu mengakses sifat dalam yang bersarang dalam tatasusunan objek. Artikel ini akan memperkenalkan cara menggunakan fungsi akses harta dalam yang disediakan dalam dokumentasi Vue untuk mengendalikan sifat bersarang dalam tatasusunan objek.

Dalam dokumentasi Vue, terdapat kaedah yang dipanggil $set, yang membolehkan kami menambah sifat pada objek secara dinamik. Jika anda ingin menambah sifat bersarang secara dinamik pada objek baharu, anda boleh menggunakan kod berikut:

let data = {
    myObject: {}
}
Vue.set(data.myObject, 'myProperty', 'myValue');

Untuk mengakses sifat dalam objek bersarang, anda boleh menggunakan kod berikut:

let myObject = {
    myPropertyA: {
        myPropertyB: {
            myPropertyC: 'myValue'
        }
    }
};
let myValue = myObject['myPropertyA']['myPropertyB']['myPropertyC'];

Tetapi apabila bersarang Kaedah ini boleh menjadi sangat membosankan apabila lapisannya dalam. Untuk menjadikan kod lebih diperkemas dan boleh dibaca, Vue menyediakan beberapa fungsi utiliti. Begini cara fungsi ini dilaksanakan:

Pertama, kita perlu menulis fungsi rekursif untuk mengakses sifat bersarang. Fungsi ini akan mengambil dua parameter: objek dan laluan harta benda. Seperti yang ditunjukkan di bawah:

function getNestedProperty(obj, propertyPath) {
    if (typeof propertyPath === 'string') {
        propertyPath = propertyPath.split('.');
    }
    if (propertyPath.length === 1) {
        return obj[propertyPath[0]];
    } else {
        let nextObj = obj[propertyPath[0]];
        let nextPath = propertyPath.slice(1);
        return getNestedProperty(nextObj, nextPath);
    }
}

Dalam fungsi ini, semak dahulu sama ada laluan atribut ialah rentetan. Jika ia rentetan, bahagikannya kepada tatasusunan. Seterusnya, jika tatasusunan laluan atribut hanya mempunyai satu elemen, nilai atribut dalam objek dikembalikan. Jika tidak, dapatkan nilai sifat elemen pertama dalam objek itu dan gunakan panggilan rekursif ke fungsi untuk mendapatkan harta dalam objek bersarang seterusnya. Keluar rekursif adalah untuk mengembalikan nilai atribut apabila tatasusunan laluan atribut tidak boleh dipisahkan lagi.

Sekarang, kita perlu menulis kaedah penetap untuk menetapkan sifat bersarang. Kaedah ini akan mengambil tiga parameter: objek, laluan sifat dan nilai baharu. Seperti yang ditunjukkan di bawah:

function setNestedProperty(obj, propertyPath, value) {
    if (typeof propertyPath === 'string') {
        propertyPath = propertyPath.split('.');
    }
    if (propertyPath.length === 1) {
        Vue.set(obj, propertyPath[0], value);
    } else {
        let nextObj = obj[propertyPath[0]];
        if (!nextObj) {
            Vue.set(obj, propertyPath[0], {});
            nextObj = obj[propertyPath[0]];
        }
        let nextPath = propertyPath.slice(1);
        setNestedProperty(nextObj, nextPath, value);
    }
}

Dalam kaedah ini, semak dahulu sama ada laluan atribut ialah rentetan. Jika ia rentetan, bahagikannya kepada tatasusunan. Jika tatasusunan laluan sifat hanya mempunyai satu elemen, gunakan kaedah $set Vue untuk menetapkan sifat objek kepada nilai baharu. Jika tidak, dapatkan nilai atribut elemen pertama dalam objek ini dan gunakan fungsi tambah rekursif untuk mendapatkan atribut dalam objek bersarang seterusnya. Keluar rekursif adalah menggunakan kaedah $set Vue untuk menetapkan nilai harta apabila tatasusunan laluan harta tidak boleh dipisahkan lagi.

Gunakan fungsi ini untuk mengakses dan menetapkan sifat bersarang dalam tatasusunan objek. Berikut ialah contoh:

let myData = {
    myArray: [
        {
            myObject: {
                myPropertyA: {
                    myPropertyB: {
                        myPropertyC: 'myValue'
                    }
                }
            }
        }
    ]
};
let myValue = getNestedProperty(myData, 'myArray.0.myObject.myPropertyA.myPropertyB.myPropertyC'); // myValue = 'myValue'

setNestedProperty(myData, 'myArray.0.myObject.myPropertyA.myPropertyB.myPropertyC', 'newValue');

Dalam artikel ini, kami memperkenalkan fungsi akses harta dalam dalam dokumentasi Vue dan menyediakan dua kaedah pelaksanaan: getNestedProperty dan setNestedProperty. Fungsi ini menjadikannya lebih mudah untuk mengakses dan menetapkan sifat bersarang dalam tatasusunan objek, tanpa menjadikan kod itu sangat bertele-tele.

Atas ialah kandungan terperinci Kaedah pelaksanaan fungsi akses harta dalam tatasusunan objek dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!