MaterializeでのselectとdatepickerをVue.jsで扱うときのメモ
背景
- Materializeの動きのせいで、select/option, datepicker/timepickerをVue.jsで使おうとしたら、うまくいかなかったのでメモっときます(；´Д｀)
事象1：selectに選択された値が、バインディングした変数に格納されない。
vue側でもっている配列hogesで選択肢を作って選択されたものを変数fooに同期したいイメージ。
<select id="id" v-model="foo"> <option v-for="h in hoges" v-bind:value="h.id">{{ h.name }}</option> </select>
Materializeは、画面描画時にこのselectとは別に要素を挿入して、その要素をユーザに操作させるため、vue側で変化が検知できないもよう。
解決
以下のようブラウザのデフォルト動作（class="browser-default）にすると、別要素を作らなくなりvue側で変化を検知できるようになった。※UIのリッチさ落ちる(；´Д｀)
<select id="id" class="browser-default" v-model="foo"> <option v-for="h in hoges" v-bind:value="h.id">{{ h.name }}</option> </select>
事象2 :
Datepickerで選択された日付が、vue側の変数startDateに同期されるイメージ。
<div class="input-field"> <input id="startDate" class="datepicker" type="text" v-model="startDate"> <label for="startDate">開始日</label> </div>
先程のselectと同じで、別要素を挿入されそちらで処理されるため、vueが変化に気付けないっぽい。
解決
今回はAPIを叩く必要に値が必要だったので、submitする際に、インスタンスからプロパティを参照して取得した。
※この方法でなくても、もしかしたらDatepickerのonSelectとかで同期できるかも。
<div class="input-field"> <input id="startDate" class="datepicker" type="text"> <label for="startDate">開始日</label> </div> ... <button class="btn waves-effect waves-light" v-on:click.prevent="submit">登録する<i class="material-icons right">send</i>
methods: {
submit () {
var startDate = M.Datepicker.getInstance($('#startDate')).date;
...
},
まとめ
UIライブラリは、既存の要素にも値を格納するようにしてほしい(´・ω・`)
