[Vue.js] 기존 JSP페이지 JSTL, EL 과 연동하기

기존 jsp페이지의 jstl과 el로 코딩 된 소스코드를 vue.js를 이용하여 수정해보겠습니다.

input과 selectbox의 이벤트바인딩을 위해 도입하였습니다. (이번에 처음 써봤어요ㅎㅎ)

먼저, vue.js를 선언해줍니다. 저는 라이브러리를 다운받아 프로젝트 경로에 넣어두었습니다.

<script src="<c:url value='/js/vue.js'/>"></script>

스크립트를 작성합니다. Vue.js 기본 사용법은 관련 레퍼런스를 참조해 주세요.

mounted속성에서, 기존 jsp에서 쓰던 컬렉션객체를 루프 돌면서 items에 세팅해줍니다. 

testSet 처럼 자체적으로 데이터를 만들 수 있습니다.

method에서는 이벤트를 정의합니다. input의 value값에 따라 selectbox의 값을 동적 세팅합니다.(selected)  

 var vueItems = new Vue({
     el: '#MappingArea',
     data: {
         items : [],
         testSet : [{FLAG : 'Y', VAL : '예'},{FLAG : 'N', VAL : '아니오'},{FLAG : 'X', VAL : '해당없음'}],
     },
     mounted: function(){
          <c:forEach items="${mappingList}" var="item" varStatus="status"> 
             this.items = this.items.concat({
                 index : "${status.index}",
                 DATA_TY_NM : "${item.DATA_TY_NM}",
                 COLUMN_SN : "${item.COLUMN_SN}", 
                 COLUMN_NM : "${item.COLUMN_NM}", 
                 });             
           </c:forEach>
     },
     methods : {
         eprssCheck : function(event, item){
             var atrbValue = event.target.value; 
             if(atrbValue == ''){
                 item.ATRB_NM = ""; 
                 item.EPRSS_AT = "X";
             }else{
                 item.ATRB_NM = atrbValue;
                 item.EPRSS_AT = "Y";
             }
         }
     }
 });

input의 v-on:input 으로 input값에 변동이 있을때마다 eprssCheck를 호출합니다.

값에 따라 selectbox의 값이 동적으로 변하는 것을 확인 할 수 있습니다.

<tbody>
    <tr v-for="(item,index) in items" :key="item.index">
        <td>{{item.COLUMN_NM}} 
            <input type="hidden" :name="'list['+index+'].columnSn'" :value="item.COLUMN_SN" />
        </td>
        <td>{{item.DATA_TY_NM}}</td>
        <td><input type="text" id="colNm" :name="'list['+index+'].colNm'" :value="item.COLUMN_NM" v-on:input="eprssCheck($event, item)"/></td>
        <td>
            <select :name="'list['+index+'].eprssAt'">
                <option v-for="(epItem,index) in testSet" 
                         :selected="epItem.FLAG == item.EPRSS_AT"
                         :value="epItem.FLAG">
                             {{epItem.VAL}}
                </option>
            </select>
        </td>
    </tr>
</tbody>