vue初学——购物车案例，增删改、加减

记录一个购物车案例，vue文件。里面需要注意深拷贝、浅拷贝。
更新一个商品的时候，先将商品信息查到，赋予一个第三方对象updateObj，记得使用深拷贝(否则会出现表单和表格同步变化的情况，即使不点提交)，再在列表里修改。

<template>
  <div>
    <h2>购物车案例</h2>
    <br>
    <div style="text-align: center">
      <button @click="toTrue">添加</button>
    </div>
    <!-- 列表 -->
    <div v-if="shoppingList.length>0">
      <h3 style="text-align: center">购物列表</h3>
      <table align="center" border="1">
        <thead>
          <tr>
            <th>编号</th>
            <th>商品</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in shoppingList":key="index">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>
              <button @click="increment(index)">+</button>
              <span>{{item.count}}</span>
              <button @click="decrement(index)">-</button>
            </td>
            <td>
              <button @click="removeproduct(index)">移除</button>
              <button @click="showproduct(index)">更新</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h3 style="text-align: center">总价格：<span style="color: red">{{totalprice | priceFormat}}</span></h3>
    </div>

    <div v-else>
      <h3 style="text-align: center">暂无商品</h3>
    </div>
    <!-- 添加商品 -->
    <div v-show="addFormShow" style="text-align: center">
      <form action="#" @submit.prevent="addItem">
        商品:<input type="text" v-model="shoppingItem.name"><br>
        价格:<input type="number" v-model="shoppingItem.price"><br>
        数量:<input type="number" v-model="shoppingItem.count"><br>
        <button type="submit">添加</button>
      </form>
    </div>
    <div v-show="update" style="text-align: center">
      <form action="#" @submit.prevent="updateproduct">
        商品:<input type="text" v-model.lazy="shoppingItem.name" readonly><br>
        价格:<input type="number" v-model.lazy="shoppingItem.price"><br>
        数量:<input type="number" v-model.lazy="shoppingItem.count"><br>
        <button type="button">取消</button>
        <button type="submit">修改</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "cart",
  data() {
    return {
      addFormShow: false,
      update: false,
      shoppingItem: {
        name: "",
        price: "",
        count: ""
      },
      shoppingList: [
        {name: 'iphone12Plus', price: '12999.0', count: 1}
      ],
      updateObj:{
        name: "",
        price: "",
        count: ""
      }
    }
  }, methods: {
    increment(i) {
      this.shoppingList[i].count++;
    },
    decrement(i) {
      if (this.shoppingList[i].count <= 1) {
        this.shoppingList.splice(i, 1);
      } else {
        this.shoppingList[i].count--;
      }
    },
    addItem() {
      if (this.shoppingItem.name.trim().length > 0 && this.shoppingItem.price.trim().length > 0 && this.shoppingItem.count.trim().length > 0) {
        let item = JSON.parse(JSON.stringify(this.shoppingItem));
        this.shoppingList.push(item);
      }
      this.shoppingItem = {
        name: "",
        price: "",
        count: ""
      };
      this.addFormShow = false;
    },
    toTrue() {
      this.addFormShow = true;
    },
    removeproduct(index) {
      this.shoppingList.splice(index, 1);
    },
    showproduct(index) {
      this.update = true;
      this.shoppingItem = this.shoppingList[index];
    },
    updateproduct(){
      for (var i=0;i<this.shoppingList.length;i++){
        if (this.shoppingList[i].name==this.shoppingItem.name){
          // 直接 this.updateObj = this.Item 是浅拷贝，updateObj变，则Item跟着变。用深拷贝（JSON）就不会同步改变。
          this.updateObj = JSON.parse(JSON.stringify(this.shoppingItem));
          this.$set(this.shoppingList,i,this.updateObj);
        }
      }
      this.shoppingItem = {
        name: "",
        price: "",
        count: ""
      };
      this.updateObj = {
        name: "",
        price: "",
        count: ""
      }
      this.update = false;
    }
  },computed: {
  totalprice() {
    return this.shoppingList.reduce((total, p) => {
      return total + p.price * p.count;
    }, 0)
  }
  }, filters: {
  priceFormat(value) {
    return "￥" + value;
  }
  }
}
</script>

<style scoped>

</style>