vue 활용하기 3편 v-if else구문, 장바구니 품절기능 만들기

Vue에는 웬만한 기능을 프론트에서 처리할 수 있도록 조건문, 반복문을 지원한다. M-V-V-M 패턴이 강력한 이유는 프론트에서 처리할 수 있는 기능의 효율성에 있다. 보기에따라 서버가 처리하고 있을 것 같은 기능을 vue는 view에서 처리한다. 이번 포스팅에서는 v-if, v-else구문을 통해 간단한 조건분기를 알아보자.

1 html파일 생성

app을 id로 사용하는 html을 작성해보자. row태그 아래에은 물건사진을 표시하는 img태그가 있다고 가정하고, 그 아래 장바구니 버튼이 만든다.

---

<main>

   <div id="app">

     <div class="row">

          <div class="col expand">

                 <div v-if="item">

                        <button class="btn btn-primary">장바구니</button>

                         <span>{{num}}</span>

                  </div>

                  <div v-else="">   

                        <button class="btn btn-primary" disabled="true">품절</button>

                  </div>

           </div>

           <button class="btn btn-primary" v-on:click="slcThis">버튼</button>  

     </div>

  </div>

</main>

---

장바구니 버튼 아래에는 span태그와 수염표시자로 num란 데이터 속성을 입력한다. 해당 테스트의 유스케이스는 다음과 같다. 

1] 장바구니 버튼을 클릭한다

2] 재고량까지 클릭한다

3] 장바구니 버튼이 사라진다

4] 장바구니 버튼이 품절로 변경된다

사용자가 장바구니 버튼을 요청하고, 관리자는 재고를 체크한다. 이때 관리자의 책임은 '재고관리'에 있고, 재고가 바닥나면 View에 '품절'이란 표시를 띄워주는 기능이 필요하다. 이를 위해 재고관리 함수를 만들어보자.

2 이벤트 & 함수 생성

현재 vue는 사용자의 반응(장바구니를 클릭 이벤트)을 감시하고 있다. 반응형 프로그램에서 이벤트는 methods(함수)와 동전의 양면과 같다. 이벤트가 발생하면 이를 처리하는 함수가 당연히 있어야하기 때문이다. 아래 코드에서는 slcThis()라는 클릭 이벤트에 대응되는 함수를 생성했다. 

---

<script>

     let etest = new Vue({

           el : "#app",

         data : {

                item : true,

                num : 0

         },

         methods:{

   

              slcThis(){

                  if(this.num >= 5){

                        this.item=false;

                   }else{

                         this.num++;

                   }

              }

         }

    })

</script>

---

slcThis함수는 클릭 이벤트가 들어올 때마다 data에 있는 num값이 5가 넘는지 확인한다. 만일 data 값에 inventory변수가 있다면, this.num >= this.inventory라고 조건을 걸어주면 된다. 또, inventory값은 판매자가 view에서 입력할 수 있도록 설계한다. 

그리고 html태그 부분을 보면, v-if="item"라고 입력했으며, item의 초기값은 'true'다. if구문에서 this.num값이 5가 넘어갈 때 this.item값이 false가 되도록 정의했기 때문에 사용자의 클릭이 5회가 되면 자동으로 'v-else'가 있는 태그의 부분(품절)이 실행된다. 해당 코드를 실행하면 아래와 같이 구현된다. v-if, v-else 구문은 간단하지만 간단한 프로그램을 제작하는 데에 있어, 가장 많이 사용되는 구문이 아닐까한다. 

{{num}}