더북(TheBook)

3.4.2 계산된 속성과 재고 작업

availableInventory 값은 고정된 값으로 실제 재고를 관리하는 과정에서만 업데이트되기 때문에 이 값을 변경하지는 않을 것입니다(한참 뒤에서 다시 다룹니다). availableInventory 값으로 사용자가 장바구니에 담을 수 있는 상품의 양을 제한할 것입니다.

그러려면 가능한 상품 개수와 사용자 장바구니에 담긴 상품 개수를 계속해서 비교해야 합니다. 사용자가 장바구니에 상품을 담을 때, 계산된 속성을 사용해서 실시간으로 비교해 볼 것입니다.

코드 3-10 남아 있는 재고에 대한 계산된 속성: chapter-03/computed-remaining.js

computed: {
  cartItemCount: function() {
    return this.cart.length || '';
  },
  canAddToCart: function() { -- canAddToCart 계산된 속성을 사용합니다. 
    return this.product.availableInventory > this.cartItemCount; -- 이미 장바구니에 담겨 있는 상품 개수를 availableInventory와 비교합니다. 
  }
}

 

객체 데이터의 속성을 사용하는 것과 동일하게 계산된 속성을 사용할 수 있기 때문에 계산된 속성인 cartItemCount를 활용할 수 있습니다. 새로 계산된 속성은 장바구니에 현재 남아 있는 재고 개수가 이미 담겨 있는 상품 개수보다 더 많은지 확인합니다. 그렇지 않다면 고객이 장바구니에 상품 최대치를 담았다는 의미로, 더 담지 못하게 막아야 합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.