vue.js 1.0 その0001-003 フォーム入力バインディング select要素

参考にさせて頂いたページ

フォーム入力バインディング - vue.js

プルダウンに表示されている文字列をバインディングする例

option要素にvalue属性を設定していない場合は、表示されている文字列がそのままバインディングされます。

<div id="app">
  <select v-model="aaa">
    <option selected>ラベル1</option>
    <option>ラベル2</option>
    <option>ラベル3</option>
  </select>
  <span>選択された要素: {{ aaa }}</span>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript">
//インスタンス作成
var hoge = new Vue({
  el : '#app',
  data : {
    aaa : ''
  }
});
</script>

プルダウンに表示されているものとは別の文字列をバインディングする例

option要素にvalue属性を設定すると、その値がバインディングされます。

<div id="app">
  <select v-model="aaa">
    <option value="値1" selected>ラベル1</option>
    <option value="値2">ラベル2</option>
    <option value="値3">ラベル3</option>
  </select>
  <span>選択された要素: {{ aaa }}</span>
</div>

<?php
// echo $this->Html->script('/assets/js/vue.js');
?>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js"></script>
<script type="text/javascript">
//インスタンス作成
var hoge = new Vue({
  el : '#app',
  data : {
    aaa : ''
  }
});
</script>