代码之家 › 专栏 › 技术社区 › Vasu Mistry

呈现“typeerror”中的Vuejs[Vue warn]错误无法读取未定义的属性“price”

vue.js

Vasu Mistry · 技术社区 · 6 年前

我正在尝试从CustomerProduct数据的对象计算总帐单(所有产品*使用量的总和),并显示帐单金额。我正在调用一个计算方法来执行此操作。客户产品数据是从 get API调用 created() 方法。

问题: 在初始渲染中,控制台显示以下错误: [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
}

3 回复 | 直到 6 年前

Vasu Kuncham 6 年前

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

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>

smith 6 年前

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

Vasu Mistry 6 年前

问题确实是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();    
        }   
    } 
}