Vue+OnsenUIでselectの値を取得する

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は使い始めたばかりでわからない事だらけなので、コードの怪しい書き方など指摘してくださると助かります。

 

Pocket
このエントリーを Google ブックマーク に追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です