Vue implements the function of adding different flavors to the shopping cart similar to Meituan takeout.

1. Similar to Meituan"s takeout function, it is basically added to the shopping cart.
Click to add to the shopping cart, the same number of meals is added, and the number of different meals is added

.

2. Question
now there is a new demand, and some meals have taste. Need to realize, the same taste of the same meal, the quantity is added, the different taste of the same meal, the number adds up
clipboard.png
as shown in the figure, the signature duck neck is the same meal, according to my previous implementation step, it should only show one item, the quantity is 5, but now we need to add the taste and distinguish it. I don"t know how to make o (taste taste) o

.

3. The previous code, click on the meal, pass it to vuex, in vuex, traverse the selected array, if the id is the same, add the quantity, if the id is different, push into the selected array

4, ask God for advice on how to write the taste?

5. The current code in vuex

  // 
      if(!food.tasteItem){
        if(!food.count){
          Vue.set(food,"count",1);
          state.selectedFoods.push(food);
        } else {
          const storedFood = state.selectedFoods.find(f => f.goodsId === food.goodsId);
          if(storedFood){
            food.countPP
          }
        }
      }
      // 
      if(food.tasteItem) {
        let newFood = Object.assign({}, {...food});
        newFood.goodsId = newFood.goodsId + "-" + food.tasteItem.id;
        const storedFood = state.selectedFoods.find(f => f.goodsId === newFood.goodsId);
        console.log(storedFood);
        if(storedFood){
          food.countPP;
        } else {
          Vue.set(food,"count",1);
          state.selectedFoods.push(food);
        }

      }
Mar.11,2021

the quickest way to traverse the selected array is not only to judge whether the id, has additional conditions, such as taste, but also to judge whether the conditions are the same


var cart = { 
}  

function addToCart(food){
    var key = food.id + foo.taste;
    cart[key] = cart[key] || [];
    cart.push(food); 
}

3. The previous code, click on the meal, passed to vuex, in vuex, traverse the selected array, if the id is the same, the quantity is added, if the id is different, push into the selected array
here id into the food id + flavor. That's the way we talked about on the second floor.

//
var cart = {
    "shopId(id)": {
        "id": {
            "id": {
                //
                "num": 1,
                "name": "1",
                "price": 21,
                "specs": "",//
            },
        }
    }
   }

//idid=id+specs,
var cart = {
    "shopId(id)": {
        "id": {
            "id + id.specs": {
                //
                "num": 1,
                "name": "1",
                "price": 21,
                "specs": "",//
            },
        }
    }
   }

you still don't understand?!

Menu