Sangil's blog

LIST안의 데이터들을 SELECT BOX로 일괄 뿌려야 되는 상황에서 V-MODEL을 이용하여 매핑하는 예제입니다.

-HTML

<div id="app">
  <template v-for="key in selectList">
    <select v-model="key.value">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
    </select>
    {{key.value}}
  </template>
  <p>
    {{selectList}}
  </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

-JS

new Vue({
  el: "#app",
  data: {
    selectList: [
      {value:"1", text:"one"},
      {value:"2", text:"two"},
      {value:"3", text:"three"}
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})

SELECT LIST를 V-FOR를 이용하여 뿌려 주었고, 그와 동시에 V-MODEL에 리스트안의 VALUE로 지정해주므로 SELECT BOX의 값이 변경 될때마다 VUE가 매핑된 값을 변경시켜 주는 것을 확인 할 수 있습니다.

JSFIDDLE -> https://jsfiddle.net/ChoiSangIl/0t9gmwc2/12/

VUE의 V-MODEL은 정말 신세계네요.. Jquery로 처리 했다고 생각하면...^^;