老师，我自己写的购物车，为什么在购物车点增加的时候，购物车的数量不变呢

Question

总价变化是正确的，打印出来的quantity值也是对的，但页面显示的值不对。
例如点击了商品a之后，不管点击“添加”按钮多少次，商品a数量显示都是1，但如果这个时候点击了商品b，商品a的数量就会变成对的
我是分了三个文件：商品列表production、购物车列表cart、总容器index，用的是父子组件间传值的方法。
下面是index的代码

<template>
  <div>
    <production @addToCart="addToCart" :list="productionList"></production>
    <hr />
    <cart
      @addToCart="addToCart"
      @delFromCart="delFromCart"
      :list="cartList"
    ></cart>
    <hr />
    <div>总价：{{ totalPrice }}</div>
  </div>
</template>

<script>
import production from './production'
import cart from './cart'
export default {
  components: {
    production,
    cart,
  },
  data() {
    return {
      productionList: [
        {
          name: '商品a',
          id: '1',
          price: 100,
        },
        {
          name: '商品b',
          id: '2',
          price: 200,
        },
        {
          name: '商品c',
          id: '3',
          price: 300,
        },
      ],
      cartList: [],
      totalPrice: 0,
    }
  },

  methods: {
    addToCart(item) {
      const shopIndex = this.cartList.indexOf(item)
      if (shopIndex === -1) {
        item.quantity = 1
        this.cartList.push(item)
      } else {
        this.cartList[shopIndex].quantity += 1
      }
      this.totalPrice += item.price
    },

    delFromCart(item) {
      const shopIndex = this.cartList.indexOf(item)
      this.cartList[shopIndex].quantity -= 1
      if (this.cartList[shopIndex].quantity === 0) {
        this.cartList.splice(shopIndex, 1)
      }
      this.totalPrice -= item.price
    },
  },
}
</script>

下面是cart的代码

<template>
  <div>
    <div class="cart-container" v-for="item in list" :key="item.id">
      <div class="cart-info">
        <span>{{ item.name }}</span>
        <span>{{ item.quantity }}</span>
      </div>
      <div class="cart-btn">
        <button @click="addToCart(item)">增加</button>
        <button @click="delFromCart(item)">减少</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
  },

  methods: {
    addToCart(item) {
      this.$emit('addToCart', item)
    },

    delFromCart(item) {
      this.$emit('delFromCart', item)
    },
  },
}
</script>

<style>
.cart-container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.cart-info {
  width: 100px;
  display: flex;
  justify-content: space-between;
}

.cart-btn {
  width: 100px;
  display: flex;
  justify-content: space-between;
}
</style>

下面是production的代码

<template>
  <div>
    <div class="production-container" v-for="item in list" :key="item.id">
      <div class="production-info">
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
      </div>
      <button @click="addToCart(item)">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      },
    },
  },

  methods: {
    addToCart(item) {
      this.$emit('addToCart', item)
    },
  },
}
</script>

<style>
.production-container {
  width: 300px;
  display: flex;
  justify-content: space-between;
  margin: 10px;
}
.production-info {
  width: 100px;
  display: flex;
  justify-content: space-between;
}
</style>

Answer 1

椒盐皮皮虾 2020-06-25 21:04:59

回想一下老师讲过vue的数据监听，vue对数组怎么处理监听更新视图的

Answer 2

双越 2020-06-03 18:38:20

每次添加、减少商品时，都打印一下 cartList 的内容，看 cartList 是否符合预期。

• 提问者 走去偷柿子呀 #1

  打印出来是对的

• 双越 回复 提问者 走去偷柿子呀 #2

  那你就再把焦点集中在 cart 组件，既然 list 是对的，为何 item.quantity 不对，这就好定位问题了。

• 提问者 走去偷柿子呀 回复 双越 #3

  item.quality打印出来也是对的，就是页面显示不对?

点开查看后面6条评论