Vue + OnsenUIでセレクトボックスの値を取得する際に手間取ったのでφ(..)メモメモ
やりたい事
- v-forを使っていい感じにoptionの選択肢を表示
- 選択肢が変更された時点で何らかの処理をする
- その際に変更された値を用いたい。
ソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <!-- OnsenUI, Vueの読み込み --> <link rel="stylesheet" href="OnsenUI/css/onsenui.css"> <link rel="stylesheet" href="OnsenUI/css/onsen-css-components.css"> <script src="Vue/vue_2.3.0.min.js"></script> <script src="OnsenUI/js/onsenui.js"></script> <script src="OnsenUI/vue-onsenui_2.0.0-beta4.js"></script> </head> <body> <template id="main"> <v-ons-page> <h1>selectのサンプル</h1> <div class="center"> <v-ons-select v-ons-model="selected" @change="get_value($event.target.value)"> <option v-for="item in items" :value="item.value"> {{ item.text }} </option> </v-ons-select> </div> </v-ons-page> </template> <div id="app"></div> </body> <script> var vm = new Vue({ el: '#app', template: '#main', data: { items: [ { text: 'A', value: 'a'}, { text: 'B', value: 'b'}, { text: 'C', value: 'c'}, { text: 'D', value: 'd'}, { text: 'E', value: 'e'} ], selected: 'a' }, methods :{ get_value(val) { console.log(val); } } }); </script> </html>
実行結果
解説
色々なサイトで似たような事について議論されていたのですが、最終的にこの方法が一番シンプルに実装されている気がしました。
参考: javascript – Vue 2 – How to select the correct <select> option after the data is fetched from db – Stack Overflow
最初はselectedの値をget_value(selected)のように渡してみたり、method側でthis.selectedと利用したりしていたのですが、selectedが更新されるタイミングが関数が呼ばれた後の用で、常に1つ前に選択した値が取得されるなどの問題があって苦労しました…。
ちなみに、スイッチ(v-ons-switch)では、@change=”get_value($event.value)”のように、変更してやると、[true/false]で値が取れました。
実行環境
- Chrome 58.0.3029.96 (64-bit)
- Vue 2.3.0
- OnsenUI v2.2.4
- vue-onsenui 2.0.0-bata.4
結構更新されていて、最新版じゃないと動かないコードとかあるので注意です。自分はそれで数時間無駄にしました…
まとめ
Vue + OnsenUIは使い始めたばかりでわからない事だらけなので、コードの怪しい書き方など指摘してくださると助かります。