1. 程式人生 > >vue ele 專案的購物車控制控制元件

vue ele 專案的購物車控制控制元件

說說最近在工作很閒的時候,在GITHUB找了一個關於VUE2.0的餓了麼專案來練手,然後在遇到的一個bug;
有點詭異:
是同一個購物車的控制元件元件,分別位於不同的商品列表上,其中一個點選+ ,能選擇商品,其數量加一,但另外一個點選+, 沒有前者的反應;
筆者找了好久,才發現是這個程式碼做的怪:

 // if (!event._constructed) {
 //     return
 // }

event._constructed 是better-scroll的一個屬性,防止非vue事件,它適合對於一些better-scroll處理過的商品列表,所以為了讓後一個列表上的控制元件有效,要不就是把上面的三行程式碼註釋掉或者後一個商品列表也用better-scroll處理一下;

addCar(event){
    console.log(this.food, "1111");
       console.log("add",'1111');
       // if (!event._constructed) {
       //     return
       // }
       if(!this.food.count){
           Vue.set(this.food,'count',0);
       }
       this.food.count++;
       console.log(this.food.count, "1111count");

     //兄弟元件的一個函式呼叫
       this.$root.eventHub.$emit('cart.add',event.target);
   },
   decreaseCar(){
       if(!event._constructed || !this.food.count){
           return
       }
       this.food.count--;
   }