VueJS [Vue 警告] 渲染错误“TypeError”无法读取未定义的属性“PRICE”答案

【问题标题】：VueJS [Vue warn] Error in render "TypeError" Cannot read property 'PRICE' of undefined"VueJS [Vue 警告] 渲染错误“TypeError”无法读取未定义的属性“PRICE”
【发布时间】：2019-06-18 05:44:59
【问题描述】：

我正在尝试从 customerProduct 数据对象计算总账单（所有产品*使用的总和）并显示账单金额。我正在调用计算方法来执行此操作。 customerProduct 数据是从created() 方法中的get api 调用中获取的。

问题：在初始渲染中，控制台显示以下错误：[Vue warn]: Error in render: "TypeError: Cannot read property 'PRICE' of undefined"。这是因为计算需要一些时间，同时当模板 html 代码呈现时，customerProductData 没有正确获取？另外，可以在这里使用watch 属性帮助吗？

计算总费用的计算方法：

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

GET api 调用：

 methods:{
    async init(){
        const response = await axios.get("/subscribe/getPresalesPricingMetaData/"+this.customerName)
        this.customerProductData = response.data;
        // console.log(response.data)
        this.getCustomerMetaData();
    },
}

customerProduct 对象：

customerProductData:[
0: {
    'PRICE': 10,
    'USAGE': 2000
},
1: {
    'PRICE': 30,
    'USAGE': 230
},
2: {
    'PRICE': 50,
    'USAGE': 200
},
3: {
    'PRICE': 30,
    'USAGE': 1000
},
]

折扣值：

customerMetaData:{
'discount': 2.2
}

【问题讨论】：

标签： vue.js

【解决方案1】：

这是一个更新的代码。尝试一次。

new Vue({
		el: '#app',
		data: {
			message: "sample mesage",
			customerProductData:[
				{
				    'PRICE': 10,
				    'USAGE': 2000,
				    'CONSUMPTION': 100
				},
				{
				    'PRICE': 30,
				    'USAGE': 230,
				    'CONSUMPTION': 200
				},
				{
				    'PRICE': 50,
				    'USAGE': 200,
				    'CONSUMPTION': 300
				},
				{
				    'PRICE': 30,
				    'USAGE': 1000,
				    'CONSUMPTION': 400
				},
			],
			customerMetaData: {
				'discount': 2.2
			}
		},
		computed: {
			billAmount(){
		        let billAmountWithoutDiscount = 0;
		        if(typeof(this.customerProductData[0].PRICE) == undefined){
		            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();    
		        }   
		    }
		},
		methods:{
		    async init(){
		    	let that = this;
		        axios.get("/subscribe/getPresalesPricingMetaData/"+this.customerName).then(function(response){
		        	that.customerProductData = response.data;
		        	that.getCustomerMetaData();
		        })
		    },
		}
	});

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

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

【讨论】：

同意你的观点，更正了问题中的“USAGE”、“CONSUMPTION”错字。错误仍然存在，与此键不匹配无关。
你能用最新的变化更新这个问题吗？它可以帮助我调试更多
是的，做到了。你能检查一下吗？正如我所写，customerProductData 正在从 GET api 调用中获取其数据，您认为时间滞后可能会导致此错误吗？
已添加。请检查。
让我们continue this discussion in chat。

【解决方案2】：

我的第一个猜测是使用方法而不是计算

【讨论】：

试过了。不工作，你要我显示代码吗？
这里正在工作 jsfiddle - jsfiddle.net/3wcb98Lk/4 - 还有其他错误，例如您试图从对象而不是数组中获取长度，并且还试图获取不在您的对象中的参数（消耗与使用)
这是我在写问题时的一个错误。也使用 GET api 调用更新了问题。错误仍然存在。你能查一下吗？

【解决方案3】：

问题确实是 GET api 调用需要时间，因此 customerProductData 没有被填充。所以当调用计算方法时，它没有任何数据可以使用。

现在，如果您仔细阅读计算方法，我实际上编写了处理上述情况的代码，使用 if 语句在未填充 customerProductData 时返回 0。这不起作用，因为使用的条件不正确。

if(typeof(this.customerProductData[0].PRICE) == undefined)

由于customerProductData中没有数据，this.customerProductData[0]本身的初始访问失败，所以PRICE属性永远不会被访问，即不返回undefined

解决方案：检查customerProductData中是否存在索引0

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

【讨论】：