Question

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

问题：在初始渲染中，控制台显示以下错误：[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();    
        }   
    } 
}

获取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
}

Answer 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>

Answer 2

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

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

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

3 个答案: