麻烦老师看下，为什么没有出数据
<template>
<div class="cart">
<div class="win">
<div class="win__all">
<!-- <i class="win__all__icon--active iconfont"></i> -->
<i class="win__all__icon iconfont"></i>
<span class="win__all__pick">全选</span>
</div>
<div class="win__clear">清空购物车</div>
</div>
<div class="product">
<div class="product__item" v-for="item in cartBag" :key="item._id">
<i class="product__pick iconfont"></i>
<img class="product__img" :src="item.imgUrl" />
<div class="product__item__detail">
<p class="product__item__title">{{ item.name }}</p>
<div class="product__item__detailitem">
<p class="product__item__price">¥</p>
{{ item.price }}
<p class="product__item__priceout">¥{{ item.oldPrice }}</p>
<div class="product__item__box">
<i
class="product__item__del iconfont"
@click="changeCart(shopId, item._id, item, -1)"
></i
>
<div class="product__item__p">
{{ cartList?.[shopId]?.[item._id]?.count || 0 }}
</div>
<i
class="product__item__add iconfont"
@click="
() => {
changeCart(shopId, item._id, item, 1);
}
"
></i
>
</div>
</div>
</div>
</div>
</div>
<i class="cart__icon iconfont"></i>
<div class="cart__num">{{ total }}</div>
<div class="cart__count">
总计：
<span class="cart__price">¥128</span>
</div>
<div class="cart__pay">去结算</div>
</div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
// import {}
// 获取购物车信息逻辑
const useCartEffect = () => {
const store = useStore();
const route = useRoute();
const shopId = route.params.id;
const cartList = store.state.cartList;
// 算总数
const total = computed(() => {
// 获取商铺的里商品列表
const productList = cartList[shopId];
// console.log('id——————',productList);
let count = 0;
// let cprice=0;
// 如果有商品
if (productList) {
// 循环商品列表，里面是一个个商品
for (let i in productList) {
// 通过下标获取到每个商品
const product = productList[i];
// 取每个商品的数量，然后相加
count += product.count;
// cprice来计算总价
// cprice+=product.cout*product.price;
}
}
// return {count,cprice};
return count;
});
// 算总价
const cprice = computed(() => {
// 获取商铺的里商品列表
const productList = cartList[shopId];
let prices = 0;
// 如果有商品
if (productList) {
// 循环商品列表，里面是一个个商品
for (let i in productList) {
// 通过下标获取到每个商品
const product = productList[i];
// prices来计算总价
prices += product.cout * product.price;
}
}
return prices.toFixed(2);
});
// 获取当前商铺下购物车里的数据
const cartBag = computed(() => {
// 获取商铺的里商品列表
const productList = cartList[shopId] || [];
// console.log(productList);
return productList;
});
return { total, cprice, cartBag };
};
export default {
name: "Cart",
setup() {
const { total, cprice, cartBag } = useCartEffect();
return { total, cprice, cartBag };
},
};
</script>
<style scoped lang="scss">
@import "../../style/viriables.scss";
@import "../../style/mixins.scss";
.cart {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0.49rem;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: $product-bgcolor;
border-top: 0.01rem solid $content-bgcolor;
border-bottom: 0.01rem solid $content-bgcolor;
z-index: 9;
// box-shadow: 0 -0.01rem 0 0 $content-bgcolor;
&__icon {
font-size: 0.3rem;
margin-left: 0.24rem;
}
&__num {
height: 0.3rem;
min-width: 0.3rem;
padding: 0 0.02rem;
border-radius: 50%;
position: absolute;
left: 0.43rem;
top: -0.05rem;
color: $product-bgcolor;
line-height: 0.3rem;
font-size: 0.16rem;
background-color: $highlight-fontcolor;
text-align: center;
transform: scale(0.5);
}
&__count {
margin-left: 1rem;
flex: 1;
font-size: 0.12rem;
color: $content-font-color;
line-height: 0.49rem;
}
&__price {
font-size: 0.18rem;
color: $highlight-fontcolor;
}
.iconfont {
color: $product-icon;
}
&__pay {
position: absolute;
width: 0.98rem;
height: 100%;
bottom: 0;
right: 0;
font-size: 0.14rem;
color: $product-bgcolor;
background-color: $product-icon;
line-height: 0.49rem;
text-align: center;
opacity: 0.7;
}
}
.product {
width: 100%;
// height: 1.4rem;
background-color: aqua;
position: absolute;
bottom: 0.49rem;
left: 0;
// margin: 0 0.1/3rem 0 0.16rem;
// flex: 1;
overflow-y: scroll;
// z-index: 99;
&__pick {
font-size: 0.26rem;
line-height: 0.5rem;
padding-right: 0.16rem;
//
}
&__item {
padding: 0.16rem 0.16rem;
border-bottom: 0.01rem solid $content-bgcolor;
display: flex;
position: relative;
// align-items: center;
&__detail {
margin: 0 0.16rem;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow-y: hidden;
}
&__title {
font-size: 0.14rem;
@include ellipsis;
line-height: 0.18rem;
}
&__detailitem {
font-size: 0.14rem;
display: flex;
flex-direction: row;
align-items: flex-end;
color: $highlight-fontcolor;
}
&__price {
font-size: 0.1rem;
}
&__priceout {
color: #999999;
margin-left: 0.06rem;
font-size: 0.1rem;
text-decoration: line-through;
}
&__box {
right: 0.1rem;
display: flex;
position: absolute;
flex-direction: row;
justify-content: center;
align-items: flex-end;
font-size: 0.14rem;
}
&__del {
font-size: 0.23rem;
color: black;
}
&__add {
font-size: 0.21rem;
color: $product-icon;
}
&__p {
// background-color: blue;
width: 0.3rem;
height: 0.2rem;
text-align: center;
font-size: 0.14rem;
color: $content-font-color;
}
}
&__img {
width: 0.46rem;
height: 0.46rem;
// margin-right: 0.16rem;
}
}
.win {
height: 0.52rem;
width: 100%;
background-color: $product-bgcolor;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 1.89rem;
font-size: 0.14rem;
color: $content-font-color;
line-height: 0.52rem;
text-align: center;
border-bottom: 0.01rem solid $content-bgcolor;
border-top: 0.01rem solid $content-bgcolor;
&__all {
position: absolute;
height: 0.52rem;
width: 1rem;
left: 0;
top: 0;
display: flex;
// background-color: indianred;
padding-left: 0.18rem;
&__icon {
font-size: 0.26rem;
margin-right: 0.1rem;
&--active {
font-size: 0.26rem;
margin-right: 0.1rem;
opacity: 0.2;
}
}
}
&__clear {
width: 1.5rem;
// background-color: plum;
height: 100%;
position: absolute;
right: 0rem;
text-align: center;
line-height: 0.52rem;
// justify-content: flex-end;
// padding-right: 0.18rem;
}
}
</style>
正在回答
同学你好，老师测试能显示出数据：
建议同学检查一下vuex中是否保存了相应的数据（可以通过打印查看），例如：
如果没有建议检查一下vuex的相关代码。
祝学习愉快！
-
同学你好，数据格式不正确。同学打印出来的item，具体的数据都在属性productInfo中（imgUrl这些数据是在productInfo属性中）：
所以item.imgUrl这样写会无法获取到imgUrl。
老师这里打印出来的item形式如下：
同学检查一下自己的数据。
可以考虑使用item.productInfo.xxx（item.productInfo.imgUrl）的形式获取数据。
2021-10-16 13:08:00
麻烦再看一下，item都是有数据的。还是原来的代码，没有改动过相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星