Méthode d'implémentation de la fonction d'accès approfondi aux propriétés du tableau d'objets dans le document Vue

Vue est un framework JavaScript populaire pour développer des applications monopage (SPA). Vue propose de nombreuses méthodes pratiques pour travailler avec des données. Lorsque nous utilisons Vue pour gérer des tableaux d'objets, nous devons souvent accéder à des propriétés approfondies imbriquées dans le tableau d'objets. Cet article explique comment utiliser les fonctions d'accès approfondi aux propriétés fournies dans la documentation Vue pour gérer les propriétés imbriquées dans un tableau d'objets.

Dans la documentation Vue, il existe une méthode appelée $set, qui nous permet d'ajouter dynamiquement des propriétés à l'objet. Si vous souhaitez ajouter dynamiquement une propriété imbriquée à un nouvel objet, vous pouvez utiliser le code suivant :

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

Afin d'accéder aux propriétés de l'objet imbriqué, vous pouvez utiliser le code suivant :

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

Mais lorsque le niveau d'imbrication est plus profond, cette méthode peut devenir très verbeuse. Afin de rendre le code plus simple et plus lisible, Vue fournit quelques fonctions utilitaires. Voici comment ces fonctions sont implémentées :

Tout d'abord, nous devons écrire une fonction récursive pour accéder aux propriétés imbriquées. Cette fonction prendra deux paramètres : un objet et un chemin de propriété. Comme indiqué ci-dessous :

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);
    }
}

Dans cette fonction, vérifiez d'abord si le chemin de la propriété est une chaîne. S'il s'agit d'une chaîne, divisez-la en tableau. Ensuite, si le tableau de chemin d'attribut ne comporte qu'un seul élément, la valeur d'attribut dans l'objet est renvoyée. Sinon, obtenez la valeur de propriété du premier élément de cet objet et utilisez un appel récursif à la fonction pour obtenir la propriété dans le prochain objet imbriqué. La sortie récursive consiste à renvoyer la valeur de l'attribut lorsque le tableau du chemin de l'attribut ne peut pas être divisé davantage.

Maintenant, nous devons écrire une méthode setter pour définir la propriété imbriquée. Cette méthode prendra trois paramètres : un objet, un chemin de propriété et une nouvelle valeur. Comme indiqué ci-dessous :

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);
    }
}

Dans cette méthode, vérifiez d'abord si le chemin de la propriété est une chaîne. S'il s'agit d'une chaîne, divisez-la en tableau. Si le tableau du chemin de propriété ne contient qu'un seul élément, utilisez la méthode $set de Vue pour définir la propriété de l'objet sur une nouvelle valeur. Sinon, obtenez la valeur d'attribut du premier élément de cet objet et utilisez la fonction d'ajout récursive pour obtenir l'attribut dans le prochain objet imbriqué. La sortie récursive consiste à utiliser la méthode $set de Vue pour définir la valeur de la propriété lorsque le tableau du chemin de la propriété ne peut plus être divisé.

Utilisez ces fonctions pour accéder et définir des propriétés imbriquées dans un tableau d'objets. Voici un exemple :

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');

Dans cet article, nous avons présenté les fonctions d'accès approfondi aux propriétés dans la documentation Vue et fourni deux méthodes d'implémentation : getNestedProperty et setNestedProperty. Ces fonctions facilitent l'accès et la définition des propriétés imbriquées dans un tableau d'objets, sans rendre le code très verbeux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!