无法读取VueJs应用程序中未定义的属性“价格”
[英]Cannot read property 'price' of undefined in VueJs Application
问题描述
我正在使用vueJs创建购物车系统。 我想显示用户想要的项目列表，但是当我运行该应用程序并尝试在结帐列表中添加产品时，当我要将项目添加到列表中时，在谷歌浏览器控制台窗口中出现以下错误。
[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
(found in <Root>)
warn @ vue.js:634
vue.js:1897 TypeError: Cannot read property 'name' of undefined
at eval (eval at createFunction (vue.js:11628), <anonymous>:3:265)
at Proxy.renderList (vue.js:2658)
at Proxy.eval (eval at createFunction (vue.js:11628), <anonymous>:3:183)
at Vue._render (vue.js:3545)
at Vue.updateComponent (vue.js:4061)
at Watcher.get (vue.js:4472)
at Watcher.run (vue.js:4547)
at flushSchedulerQueue (vue.js:4305)
at Array.<anonymous> (vue.js:1989)
at flushCallbacks (vue.js:1915)
logError @ vue.js:1897
cart.html:91 Uncaught (in promise) TypeError: Cannot read property 'price' of undefined
at cart.html:91
这是我的cart.html代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstap.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>-->
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Show All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/AddProducts.html">Add Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html"> cart</a>
</li>
</ul>
</nav>
<br />
<div class="container" id="app">
<h2>Your cart</h2>
<table class="table table-striped">
<thead>
<tr>
<th>Product</th>
<th>quantity</th>
<th>Rate</th>
<th>vendor</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr v-for="cartItem in cartItems">
<td>{{cartItem.product.name}}</td>
<td>
<button type="button" class="btn btn-primary" v-on:click="changequantity(cartItem.productId,-1)">-</button>
{{cartItem.quantity}}
<button type="button" class="btn btn-primary" v-on:click="changequantity(cartItem.productId,+1)">+</button>
</td>
<td>{{cartItem.product.price}}</td>
<td>{{cartItem.product.vendor.name}}</td>
<td>{{cartItem.quantity*cartItem.product.price}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><b>Total</b></td>
<td>{{this.totalPrice}}</td>
</tr>
</tbody>
</table>
</div>
<script>let app = new Vue({
el: "#app",
data: {
totalPrice: 0,
price: 0,
cartItems:[]
},
methods:{
fetAllcartItems(){
new Promise((resolve)=>{
axios.get('/api/cart').then(function (response) {
resolve(response.data)
})
}).then((data)=>{
console.log(data)
this.cartItems=data
// console.log(data)
for(d in data){
this.totalPrice = this.totalPrice+ (d.quantity )* (d.product.price);
}
// console.log(this.products)
})
},
changequantity(id,quantity){
var obj = {id : id , quantity: quantity}
// let iddd = parseInt(id)
console.log(this.cartItems)
let index =this.cartItems.findIndex(item => item.productId == id)
this.totalPrice = this.totalPrice + this.cartItems[index].product.price * quantity
if(this.cartItems[index].quantity ===1 && quantity===-1){
this.cartItems.splice(index ,1);
}
new Promise((resolve)=>{
axios.post('/api/cart/add',obj).then(function (response) {
resolve(response.data)
})
}).then((data)=>{
console.log(data)
if(data.quantity>0)
this.cartItems[index].quantity = data.quantity
/*for(d of data){
this.totalPrice = this.totalPrice+ (d.quantity )* (d.product.price);
}*/
})
// location.reload();
}
}
})
app.fetAllcartItems();</script>
</body>
</html>
这是单击“购买”按钮时的屏幕截图。
这是我运行应用程序时的屏幕截图。
2 个解决方案
解决方案1
1 2019-07-21 03:45:14
for(d in data){几乎可以肯定是错误的。 也许您的意思for(const d of data) { ？ d原始形式是字符串键，而不是数组中的项。 这很可能是第二个错误的原因，一个关于price错误。
对于有关name的错误，我想是这样的：
<td>{{cartItem.product.vendor.name}}</td>
在某些情况下， cartItem.product.vendor似乎undefined 。
我强烈建议您开始使用短绒。 您的代码中充满了其他一些小缺陷，我希望棉绒能为您效劳。
首先，您不应该创建所有这些新的承诺。
解决方案2
1 已采纳 2019-07-21 11:50:30
若要查看显示名称的原因，您需要检查所获取的数据，请在VueDevtool上进行检查，或者将console.log(this.cartItems)放在适当的位置，并查看其相关性，确保在此对象中cartItems是对象数组，其中poduct也是对象，名称具有值/空值。
同样是for(d in data) ，替换for(let d in data)
TypeError：无法读取节点应用程序中未定义的属性“修剪”
[英]TypeError: Cannot read property 'trim' of undefined in Node application
如何解决无法读取 nodejs 应用程序中未定义的属性“推送”？
[英]How to solve cannot read property 'push' of undefined in nodejs application?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.