showCheckout() 이후에 메서드 정의에 function() 정의가 빠져 있는 것을 볼 수 있습니다. ES2015라고도 하는 ES6 문법에서는 더 짧은 구문의 메서드 정의가 가능합니다. 앞으로는 메서드 정의에 이 구문을 사용하겠습니다.

이제 뷰에 버튼을 추가하고 클릭 이벤트를 연결하겠습니다.

코드 3-16 <장바구니 담기> 버튼 추가하기: chapter-03/add-cart-button.html

<div class="nav navbar-nav navbar-right cart">
  <button type="button"
      class="btn btn-default btn-lg"
      v-on:click="showCheckout">
    <span class="glyphicon glyphicon-shopping-cart">
      {{cartItemCount}}
    </span>
    <span>체크아웃</span>
  </button>
</div>

---

 

버튼을 누르면 showCheckout 메서드가 실행되고, showProduct 메서드가 상태를 전환 혹은 뒤집습니다. 체크아웃 정보를 어딘가에는 넣어야 하므로 여기서 체크아웃 버튼은 중요합니다. 다음 절에서 자세히 알아보겠습니다.