jspang 做個那個pos系統--學習筆記

/為什么不能使用Object.assign() //使用Object.assign之后數據會發生改變，但是試圖沒有跟新

<template>
  <div class="pos">
    <el-row>
      <el-col :span='7' class="pos-order" id="order-list">
        <el-tabs>
          <!--點餐-->
          <el-tab-pane label="點餐">
             <el-table :data= 'tableData'   style="width:100%;">
               <el-table-column prop="goodsName" label="商品名稱"></el-table-column>
               <el-table-column prop="count" label="數量" width="70"></el-table-column>
               <el-table-column prop="price" label="金額" width="70"></el-table-column>
               <el-table-column  label="操作" width="100" fixed="right">
                 <template scope="scope">
                    <el-button type="text" size="small">刪除</el-button>
                    <el-button type="text" size="small">增加</el-button>
                 </template>
               </el-table-column>
             </el-table>
             <div>
                 總數：0    總價：0 元
             </div>
             <div class="btn">
               <el-button type="warning">掛單</el-button>
               <el-button type="danger">刪除</el-button>
               <el-button type="success">結賬</el-button>
             </div>
          </el-tab-pane>
          <!--掛單-->
          <el-tab-pane label="掛單">

          </el-tab-pane>
          <!--外賣-->
          <el-tab-pane label="外賣">

          </el-tab-pane>
        </el-tabs>
      </el-col>
       <el-col :span='14' >
          <div class="goods">
            <div class="title">常用商品</div>
            <div class="goods-list">
              <ul>
                <li v-for="item  of oftenGoods" :key="item.id" @click="addOrderList(item)">
                  <span>{{item.goodsName}}</span>
                  <span class="o-price">￥{{item.price}}</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="goods-type">
              <el-tabs>
                <el-tab-pane label="漢堡">
                    <div>
                      <ul class='cookList'>
                          <li v-for=" list in type0Goods" :key="list.id">
                              <span class="foodImg"><img :src="list.goodsImg" width="100%"></span>
                              <span class="foodName">{{list.goodsName}}</span>
                              <span class="foodPrice">￥{{list.price}}元</span>
                          </li>
                      </ul>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="小食">
                  <div>
                      <ul class='cookList'>
                          <li v-for=" list in type0Goods1" :key="list.id">
                              <span class="foodImg"><img :src="list.goodsImg" width="100%"></span>
                              <span class="foodName">{{list.goodsName}}</span>
                              <span class="foodPrice">￥{{list.price}}元</span>
                          </li>
                      </ul>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="飲料">
                  <div>
                      <ul class='cookList'>
                          <li v-for=" list in type0Goods2" :key="list.id">
                              <span class="foodImg"><img :src="list.goodsImg" width="100%"></span>
                              <span class="foodName">{{list.goodsName}}</span>
                              <span class="foodPrice">￥{{list.price}}元</span>
                          </li>
                      </ul>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="套餐">
                  <div>
                      <ul class='cookList'>
                          <li v-for=" list in type0Goods3" :key="list.id">
                              <span class="foodImg"><img :src="list.goodsImg" width="100%"></span>
                              <span class="foodName">{{list.goodsName}}</span>
                              <span class="foodPrice">￥{{list.price}}元</span>
                          </li>
                      </ul>
                    </div>
                </el-tab-pane>
              </el-tabs>
          </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'pos',
  data(){
    return{
        tableData: [],
        tableData1: [],
        oftenGoods:[],
        type0Goods:[],
        type0Goods1:[],
        type0Goods2:[],
        type0Goods3:[],
        totalMoney:0,
        totalCount:0
    }
  },
  //在虛擬dom加載完成之后
  mounted:function(){
    let orderHeight =  document.body.clientHeight;
    console.log(orderHeight);
    document.getElementById('order-list').style.height =orderHeight +'px';
  },
  created(){
      //獲取常用商品
      axios.get('http://jspang.com/DemoApi/oftenGoods.php')
        .then(response => {
           // console.log( response );
            this.oftenGoods = response.data
        })
        .catch(error =>{
            console.log( error )
            alert('網路錯誤，不能訪問')
        })
       //分類商品數據
       axios.get('http://jspang.com/DemoApi/typeGoods.php')
        .then(response => {
           // console.log( response );
            this.type0Goods = response.data[0]
             this.type0Goods1 = response.data[1]
              this.type0Goods2 = response.data[2]
               this.type0Goods3 = response.data[3]
        })
        .catch(error =>{
            console.log( error )
            alert('網路錯誤，不能訪問')
        })
  },
  methods:{
      addOrderList(goods){

          this.totalMoney =0;
          this.totalCount =0;
            //商品是否已經存在於訂單列表中
            let isHave = false;
            for(let i =0; i< this.tableData.length;i++ ){
                if(this.tableData[i].goodsId == goods.goodsId ){
                    isHave = true;
                }
            }
            //根據判斷的值編寫業務邏輯
            if(isHave){
               let arr = this.tableData.filter( ele =>
                   //過濾條件，返回
                   ele.goodsId == goods.goodsId
               )
               arr[0].count++;
            }else{
                //在這里面添加
                //let newGoods = Object.assign(goods,{count:1})     //這里為什么不能使用Object.assign()  //使用Object.assign之后數據會發生改變，但是試圖沒有跟新
                 let newGoods = {
                     goodsId:goods.goodsId,
                     goodsName:goods.goodsName,
                     price:goods.price,
                     count:1
                }
                this.tableData.push(newGoods)

                //this.$set(this.tableData,newGoods)
                 
                console.log(this.tableData)
            }
      }
  },
  
  watch:{
     tableData:{
        handler(a,b){
            this.tableData= a;
           console.log(a ,b)
        },
        deep:true
      },
  }
}
</script>