vue.js selectbox 셀렉트 박스 예시 / v-for / v-model

<template>
    <div>
        <h1>Home {{ title1 }}</h1>
    </div>
    <input type="text" v-model="input1"> <!-- 양방향 입력 가능-->
    <button type="button" @click="getData">get</button> <!-- onclick 과 같은 효과 (vue.js)-->
    <button type="button" @click="setData">set</button> 

    <select class="from-control" v-model="regions" @change="changeData">
        <option :key="i" v-for="(d, i) in options" :value="d.v"> <!-- :key : 고유한 이름 / data : d, i : index-->
            <!-- : 콜론 사용 시 바로 데이터에 접근 가능-->
            {{ d.t }}
        </option>
    </select>

    <table>
        <tr :key="i" v-for="(d,i) in options">
            <td>{{ d.v }}</td> <!-- vlaue 값-->
            <td>{{ d.t }}</td> <!-- text 값-->
        </tr>
    </table>

</template>

<script>
    export default{
        data(){
            return{
            title1 : "제목1",
            title2 : "제목2",
            input1 : "input1",
            options : [
                {
                    v : "S", t: "Seoul"
                },
                {
                    v : "J", t: "Jeju"
                },
                {
                    v : "B", t: "Busan"
                }
            ],
            regions : "B"
            }
        },
        watch : { // 모니터링
            input1(){
                console.log(intpu1);
            }
        },
        method : { // 자바스크립트의 모든 함수는 이곳에 선언
            getDate(){
                alert(this.input1);
            },
            setDate(){
                this.input1 = "set";
            },
            changeData(){ // 셀렉트박스 변경 시 해당 값 알림
                alert(this.regions);
            }
        },
    }
</script>

1. @chage 를 활용하여 셀렉트박스 데이터 변경 시 이벤트 메소드가 발생하도록 처리