CartList.vue

<template>
  <div class="wrapper">
    <div class="wrapper__cartListTitle">
      我的全部购物车 （
      <span>2</span>
      ）
    </div>
    <template v-for="item in cartList" :key="item.shopName">
      <div class="wrapper__content">
        <div class="wrapper__content__shopOrders">
          <h2 class="shop-title">{{ item.shopName }}</h2>
          <template
            v-for="(innerItem, innerIndex) in item.productList"
            :key="innerIndex"
          >
            <div class="shop-product" v-if="innerItem.count > 0">
              <img :src="innerItem.imgUrl" class="shop-product__img" />
              <div class="shop-product__msg">
                <span class="shop-product-name">{{ innerItem.name }}</span>
                <div class="shop-product-amount">
                  <span class="price-icon">¥</span>
                  <span class="price">{{ innerItem.price }}</span>
                  <span class="multiply">x</span>
                  <span class="amount">{{ innerItem.count }}</span>
                </div>
              </div>
              <div class="total-price">
                <span class="icon">¥</span>
                <span class="price">{{
                  innerItem.count * innerItem.price
                }}</span>
              </div>
            </div>
          </template>
          <div class="more">
            共计
            <span class="more__total">3</span>
            件/1.4kg
            <span class="more__icon iconfont">&#xe7b2;</span>
          </div>
        </div>
      </div>
    </template>
    <Docker :currentIndex="1" />
  </div>
</template>

<script>
import Docker from "../../components/Docker";
import { useStore } from "vuex";

export default {
  name: "Cart",
  components: { Docker },
  setup() {
    const store = useStore();
    const cartList = store.state.cartList;
    console.log(cartList);
    return {
      cartList,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";

.wrapper {
  position: absolute;
  overflow-y: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  &__cartListTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.44rem;
    line-height: 0.22rem;
    font-size: 0.16rem;
    color: $color-333;
    background-color: $color-FFF;
  }
  &__content {
    position: absolute;
    overflow-y: auto;
    padding: 0 0.18rem;
    top: 0.44rem;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    background-color: #f8f8f8;
    &__shopOrders {
      margin-top: 0.16rem;
      padding: 0.16rem;
      background-color: $color-FFF;
      color: $color-333;
      border-radius: 0.04rem;
      .more {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 0.28rem;
        width: 100%;
        font-size: 0.14rem;
        line-height: 0.2rem;
        color: $color-999;
        background-color: $color-F5F5F5;
      }
      .shop-title {
        margin: 0 0 0.16rem;
        font-size: 0.16rem;
      }
      .shop-product {
        display: flex;
        position: relative;
        margin-bottom: 0.16rem;
        &__msg {
          display: flex;
          flex-direction: column;
          margin-left: 0.16rem;
        }
        .shop-product-name {
          font-size: 0.14rem;
          color: $color-333;
          line-height: 0.2rem;
          font-weight: 600;
          margin-bottom: 0.06rem;
        }
        .total-price {
          position: absolute;
          right: 0;
          bottom: 0;
          line-height: 0.15rem;
          display: flex;
          align-items: center;
          .icon {
            display: inline-block;
            font-size: 0.2rem;
            transform: scale(0.5);
          }
          .price {
            font-size: 0.14rem;
            margin-left: -0.02rem;
          }
        }
        .shop-product-amount {
          display: flex;
          align-items: center;
          line-height: 0.2rem;
          color: $color-E93B3B;
          .multiply {
            margin-left: 0.05rem;
          }
          .price-icon {
            display: inline-block;
            font-size: 0.2rem;
            transform: scale(0.5);
          }
          .price {
            font-size: 0.14rem;
            margin-left: -0.03rem;
          }
          .amount {
            font-size: 0.14rem;
            margin-left: 0.05rem;
          }
        }
        &__img {
          width: 0.46rem;
        }
      }
    }
  }
}
</style>

问题描述：

1. 我的数据是从store中获取的

打印出来的数据是：有两组对象

2.然后我遍历cartList,通过以下方法

<template v-for="item in cartList" :key="item.shopName">
      <div class="wrapper__content">
        <div class="wrapper__content__shopOrders">
          <h2 class="shop-title">{{ item.shopName }}</h2>
          <template
            v-for="(innerItem, innerIndex) in item.productList"
            :key="innerIndex"
          >
            <div class="shop-product" v-if="innerItem.count > 0">
              <img :src="innerItem.imgUrl" class="shop-product__img" />
              <div class="shop-product__msg">
                <span class="shop-product-name">{{ innerItem.name }}</span>
                <div class="shop-product-amount">
                  <span class="price-icon">¥</span>
                  <span class="price">{{ innerItem.price }}</span>
                  <span class="multiply">x</span>
                  <span class="amount">{{ innerItem.count }}</span>
                </div>
              </div>
              <div class="total-price">
                <span class="icon">¥</span>
                <span class="price">{{
                  innerItem.count * innerItem.price
                }}</span>
              </div>
            </div>
          </template>
          <div class="more">
            共计
            <span class="more__total">3</span>
            件/1.4kg
            <span class="more__icon iconfont">&#xe7b2;</span>
          </div>
        </div>
      </div>
    </template>

3.结果是只有第二个商城的数据，第一个商城没有遍历到数据

4.我修改第二个商城的数据

发现这面遍历会发生改变，而修改第一个商城的数据，并不会遍历出内容，请问是我遍历的方法错了还是什么问题呢？