vue js! select value값 연동하기!

v-model의 사용법 응용중 하나. 

 

select 뿐 아니라 checkbox도 동일!

 

<input type="radio" name="select" value="1" v-model="picked">하나만 선택 가능
<input type="radio" name="select" value="2" v-model="picked">복수응답 가능

 

<script>

  export default {

    name: 'landing-page',

    components: {},

    data () {

      return {

        picked: null

      }

    },

    methods: {

      open (link) {

      },

      back () {

      },

      insertvote () {

        localStorage.setItem('select_radio', this.picked)

  }

</script>

 

대충 이런식으로 사용한다.

 

스크립트 소스는 사용하는것중 다 자르고 일부만 가져온것으로 

 

전부 복붙 하지 않기로 하자.

 

v-model="picked" 의 picked가 변수명이다.

 

그리고 스크립트에서 this.picked를 하면 선택한 밸류값을 가져올 수 있다.

 

당연 양방향 바인딩이기에 변경도 가능.