Vue.js 셀렉트1 선택값에 따라 셀렉트2 옵션값이 바뀌는 기능

- body -

<!-- 상품 검색창 -->
<div id="divSearchProduct">
    <select id="sales_type" v-on:change="inputSelectVal">
        <option v-for="item in optListSalesType"> {{ item }} </option>
    </select>
    <select id="mfcomp" v-on:change="inputSelectVal">
        <option v-for="item in optListMfcomp"> {{ item }} </option>
    </select>
    <input type="text" class="inputTxt p15" id="schKeyword" v-model="searchKeyword" placeholder="검색어를 입력해 주세요.">
    <a href="" class="btnType blue" name="btn" id="searchProductList" v-on:click.prevent="searchBtnEvent"><span>검색</span></a>
</div>

- script - 

<script>
    //vue 객체를 설계할 때는 어떤 값들을 data 속성에 변수들로 설정할지 잘 짜야 한다.
    //마치 java 에서 객체를 설계할 때, class 만들 때 멤버 변수들 잘 설정해야 하는 것과 비슷하다.
    var vueSearchDiv = new Vue({
        el: '#divSearchProduct',
        data: {
            salesType: '전체',  //select#sales_type 현재 선택되어 있는 값
            mfcomp: '전체',     //select#mfcomp 현재 선택되어 있는 값
            searchKeyword: '',  //input#schKeyword 현재 입력되어 있는 값
            optListSalesType: [''], //select#sales_type 안에 나열할 option 요소들의 리스트
            optListMfcomp: ['']     //select#mfcomp 안에 나열할 option 요소들의 리스트

        },
        methods: {
            //select 태그의 값이 바뀌면 이벤트 객체를 파라미터로 받아서 이벤트 대상 요소에 접근한다.
            //select요소.value 하면 select 요소 안에서 현재 선택되어 있는 option값을 받아온다.
            //그 값을 받아다가 vue 객체에 data 값으로 넣어 둔다.
            inputSelectVal: function (e) {
                const sel = e.currentTarget;
                switch(sel.id) {
                    case 'sales_type' :
                        this.salesType = sel.value;
                        break;
                    case 'mfcomp' :
                        this.mfcomp = sel.value;
                        break;
                }
            },
            //ajax나 axios 로 서버로부터 list 값을 받아서 함수 안에 파라미터로 넣어 준다. (type 파라미터는 그냥 하드코딩 해도 되고 뭐 알아서)
            //그 list 값을 받아와서 vue 객체 data 값으로 넣어 준다.
            //그러면 위에서 v-for="item in list" 해놨기 때문에 list 안에서 요소들을 하나씩 꺼내서 select 안에 option 값들로 나열해 준다.
            //여기서는 분기문도 필요하고, select 안에서 나열되는 첫 번째 option 값은 항상 '전체'로 고정하느라고 methods 함수를 따로 만들어 두었다.
            //하지만 굳이 필요한 상황이 아니라면 그냥 vueObj.list = list 해서 data 속성 안으로 꽂아주는 편이 더 간단하다.
            //주의할 점이 한 가지 있다. 초기값이 들어가지 않는다는 점이다.
            //해당 함수가 한 번 실행되면 '전체'를 넣은 채로 list를 만들어 주지만, 실행하기 이전에는 vue 객체 안에 data 속성에서는 '전체' 값이 들어가 있지 않은 상태이다. 
            //그래서 초기값을 적절하게 쥐어 줘야 한다. 초기 화면일 때 화면상에는 select에 현재 선택된 option 값이 '전체'로 나와 있더라도, Vue 객체는 값이 들어가 있지 않은 상태이니 알아 두어야 한다.
            updateOptList: function(type, list) {
                const arr = new Array();
                arr.push('전체');
                
                switch(type) {
                    case 'sales' :
                        this.optListSalesType = arr.concat(list);
                        break;
                    case 'mfcomp' :
                        this.optListMfcomp = arr.concat(list);
                        break;
                }
            },
        
            searchBtnEvent: function() {
                const currentPagePL = document.querySelector('#currentPageProductList').value;
                axios({
                    url: 'getProductList-vue', 
                    method: 'post',
                    data: {
                        salesType: this.salesType == '전체' ? '%' : this.salesType,
                        mfcomp: this.mfcomp == '전체' ? '%' : this.mfcomp,
                        keywordProductList: this.searchKeyword == '' ? '%' : this.searchKeyword,
                        currentPage: currentPagePL,
                        pageBlockSize: pageBlockSizeProductList
                    }
                })
                .then(function(result) { 
                    console.log(result);
                    inputProductListRows(result.data.list);
                    createPaginationDiv(currentPagePL, result.data.totalCntProductList); 
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        }
    });

</script>

- 220422