0
votes

Vuejs [Vue avertir] Erreur dans le rendu "TypeError" ne peut pas lire le bien "Prix" de non défini "

J'essaie de calculer la facture totale (somme de tous les produits * Utilisation) à partir d'un objet de données du chiffroducteur et d'afficher le montant de la facture. J'appelle une méthode calculée pour effectuer cela. Les données CustomerProduct sont extraites à partir d'un appel Obtenir un appel code> API dans la méthode créée () code>.

problème: strong> dans le rendu initial, Spectacles de console Erreur suivante: [Vue Warn]: Erreur de rendu: "TypeError: impossible de lire la propriété" Prix "de non défini" code>. S'agit-il parce que le calcul prend du temps et que lorsque le modèle de modèle HTML rend, le CustomerProductData n'est pas correctement récupéré? Aussi, peut utiliser p> p>

Méthode calculée pour calculer la facture totale: P>

customerMetaData:{
'discount': 2.2
}

vue.js

0 commentaires

3 Réponses :

0
votes

Ma première hypothèse est d'utiliser la méthode au lieu de calculé

3 commentaires

Essayé ça. Ne fonctionne pas, voulez-vous que je montrais le code pour cela?

voici le travail jsfiddle - jsfiddle.net/3wcb98lk/4 - il y avait d'autres erreurs, telles que vous essayaient de t'avoir une longueur d'objet au lieu d'une matrice et essayé également d'obtenir un paramètre qui n'était pas dans votre objet (consommation vs usage)

C'était une erreur de mon côté en écrivant la question. Mise à jour de la question avec l'appel Obtenir API aussi. L'erreur persiste toujours. Pourriez-vous s'il-vous-plaît vérifier?

1
votes

Voici un code mis à jour. Essayez une fois.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
	<h1>{{ billAmount }}</h1>
</div>

5 commentaires

D'accord avec vos points, corrigez l'utilisation de la typo «consommation» de la question. L'erreur persiste toujours, ce n'était pas sur cette inadéquation de clé.

Pourriez-vous mettre à jour la question avec les derniers changements?. Cela m'aide à déboguer plus

Oui, ça. Peux tu vérifier s'il te plaît? Comme je l'ai écrit, le CustomerProduCtData reçoit ses données d'un appel d'accès à l'API, pensez-vous que le délai pourrait entraîner cette erreur?

Ajoutée. Vérifiez s'il vous plaît.

Laissez-nous Continuez cette discussion en chat .

0
votes

La question était en effet que l'appel de l'API d'obtention prenait du temps, d'où le CustomerProduCtData n'était pas renseigné. Ainsi, lorsque la méthode calculée a été appelée, il n'a pas eu de données à utiliser.

Maintenant, si vous lisez la méthode calculée avec soin, j'ai réellement écrit le code pour traiter la situation ci-dessus à l'aide d'un si code > Déclaration pour retourner 0 si le CustomerProductData n'était pas renseigné. Cela n'a pas fonctionné car la condition utilisée était incorrecte. p> xxx pré>

car, il n'y a pas de données dans CustomerProduCtData, l'accès initial de this.customerproductdata [0] code> échoue, donc le prix code> Propriété n'est jamais accessible, c'est-à-dire non fort> retourner non défini code> p>

Solution: Vérifiez si l'index 0 existe ou non dans CustomerProductData P>

computed:{
    billAmount(){
        var billAmountWithoutDiscount = 0;
        if(!this.customerProductData.hasOwnProperty(0)){
            return 0.0
        }
        else{
            for(let i=0;i<this.customerProductData.length;i++){
                billAmountWithoutDiscount += this.customerProductData[i].PRICE * this.customerProductData[i].CONSUMPTION;
            }
            return Number((100.0 - this.customerMetaData.discount)*billAmountWithoutDiscount/100).toLocaleString();    
        }   
    } 
}

0 commentaires