javascript - vue signale une erreur lors du passage d'objets via des accessoires

Question

Composant parent App.vue

Sous-composant sonCp.vue

Structure des données

Une erreur est signalée mais les données peuvent être restituées

Excusez-moi. Au fait, aidez-moi à vérifier si la façon dont je récupère les données est correcte. Dois-je les mettre dans la création ?

Answer 1

Le sous-composant recevait initialement une chaîne vide et n'avait pas d'attributs tels que .acount.name, une erreur s'est donc produite.

Solution la plus simple :

dans le composant parent App.vue

<sonCp :dataObj="dataObj" />

Changé en :

<sonCp :dataObj="dataObj" v-if="dataObj" />

Answer 2

Les données demandées de manière asynchrone seront rendues deux fois ! La première fois, c'est lorsque la requête n'est pas complétée. A ce moment, obj est renvoyé par vous''. Ensuite, lorsque le sous-composant obtient la valeur, une erreur doit se produire ! La deuxième fois, c'est lorsque la demande est renvoyée, puis il y a des données. La solution est donc évidente, il existe de nombreuses solutions.

Answer 3

Initialement, dataObj est un caractère nul, donc une erreur sera certainement signalée lorsqu'elle sera transmise au sous-composant. Vous pouvez utiliser v-if pour déterminer si les données ont été obtenues, puis les restituer après les avoir obtenues.

Answer 4

1. Comme mentionné ci-dessus, utilisez v-if pour déterminer dataObj.length dans le dom afin d'assurer le rendu lorsqu'il y a des données (recommandé !!)

2. Définissez à l'avance la structure des données de l'objet dataObj dans l'option de données du composant parent, par exemple :

data() {
    return {
        dataObj: {
            id: '',
            account: {
                name: '',
                age: ''
            }
        }
      
    };
}

De plus, il est recommandé à l'auteur d'essayer de sélectionner le type de données approprié et d'attribuer la valeur par défaut lors de la réservation de l'élément initial dans l'option data. Par exemple, le dataObj dans le composant parent doit stocker un type de tableau. , pour que l'expression sémantique soit également claire. dataObj: []

Answer 5

<son-cp :data-obj="dataObj"></son-cp>