
Vue.jsの事書き始めて3回目です。LaravelMix上でVue.jsを利用していますが、Vue.jsを読み込みさえしていれば、コードは利用できますので、LaravelMixじゃない人でも学習の参考になるはずです。ほんとは今日はフォームとのデータやり取りまでやりたかったのですが、頭で思ってるものを文字にすると、頭で必要だと思っていた文字数と凄い乖離があるので、イベントの紐づけまでにしました。なんかまとめるのは難しいですね。日々精進します。それではよろしくお願いします。
Vue.js連想配列の出力
前回は項目1つでやりましたが、実戦で項目が1つということはあんまりないので、3つに増やしてやってみます。1つも3つも大差ないかも知れませんが、頭の悪い自分は、チュートリアルを自分が見ていて、これ複数の場合どうなんの?って思うことが多々あるので複数でやります。
import Vue from 'vue' const exp = new Vue({ el: '#test', data: { station: [ { sakuradouri: '名古屋', next: '中村区役所', before: '国際センター' }, { sakuradouri:'国際センター', next:'名古屋', before: '丸の内' }, { sakuradouri: '丸の内', next: '国際センター', before: '久屋大通' }, { sakuradouri: '久屋大通', next: '丸の内', before: '高岳', }, { sakuradouri:'高岳', next: '久屋大通', before: '車道' }, { sakuradouri:'車道', next: '高岳', before: '今池', }, { sakuradouri:'今池', next: '車道', before: '吹上' }, { sakuradouri:'吹上', next:'今池', before: '御器所' }, { sakuradouri:'御器所', next:'吹上', before: '桜山', }, { sakuradouri:'桜山', next:'御器所', before: '瑞穂区役所' }, ], }, });
というわけで、駅の前後を追加しました。どうでもいいですが、駅を利用するのはこの回までになります。次にViewの方でVueを出力していきます。ダジャレってみました。
<html> <head> </head> <body> <div id="test"> <table> <tr> <th>駅</th> <th>次の駅</th> <th>前の駅</th> </tr> <tr v-for="(stations,i) in station"> <td><input name="sakuradouri" class="form-control" v-bind:value="stations.sakuradouri" type="text" /></td> <td><input name="next" class="form-control" v-bind:value="stations.next" /></td> <td><input name="before" class="form-control" v-bind:value="stations.before" /></td> </tr> </table> </div> </body> <script src="{{asset('js/vuetest.js')}}"></script> </html>
今回はイベント定義して値取るがゴールなのでv-bindには触れません。今度やります。これで、値が出力されると思います。ちなみに、前回はiがなかったのですが、v-forの中でi参照すると、ループ回数が取れます。ループ回数と言っていいのかは分かりませんが。
ここまで意味不明な人は、これより簡単なパターンでやってるので、前回の記事確認頂けると学習し易いです。
Vue.jsのイベント定義
イベントとかハンドラとか、言葉が分かりづらいですよね。イベントは、この場合、ブラウザ触ってる人の行動に紐づける機能です。イベントハンドラとも言ったりします。ハンドラって個人的にクリックとかオンフォーカスとか、ユーザの行動のキッカケを示すものだと思ってました。とにかく、ユーザの行動に対して機能を紐づけるにはどうするのかを書きます。
- View側に監視したいHTMLに機能を紐づけます
- Vue側に機能を書きます
順番はどっちでもいいですが、やることは二つです。
HTMLに機能を紐づける方法
イベントを紐づけたいHTMLに向かってv-onというディレクティブを利用します。これで、Vue.jsのメソッドを利用することができます。
<html> <head> </head> <body> <div id="test"> <table> <tr> <th>駅</th> <th>次の駅</th> <th>前の駅</th> </tr> <tr v-for="(stations,i) in station"> <td><input name="sakuradouri" class="form-control" v-bind:value="stations.sakuradouri" @change="changeData" type="text" /></td> <td><input name="next" class="form-control" v-bind:value="stations.next" /></td> <td><input name="before" class="form-control" v-bind:value="stations.before" /></td> </tr> </table> </div> </body> <script src="{{asset('js/vuetest.js')}}"></script> </html>
v-onは、上記の方法で表現できます。自分はこちらの方法でやっています。
Vue.jsでメソッド定義
Vue.jsのメソッドはmethodsプロパティに書きます。ユーザアクションはmethodsに書いてます。似たようなのにcomputedがありますが、こちらはVue.js内でデータを計算させたい場合に使っています。めちゃくちゃ便利なので、また今度書きます。
import Vue from 'vue' const exp = new Vue({ el: '#test', data: { station: [ { sakuradouri: '名古屋', next: '中村区役所', before: '国際センター' }, { sakuradouri:'国際センター', next:'名古屋', before: '丸の内' }, { sakuradouri: '丸の内', next: '国際センター', before: '久屋大通' }, { sakuradouri: '久屋大通', next: '丸の内', before: '高岳', }, { sakuradouri:'高岳', next: '久屋大通', before: '車道' }, { sakuradouri:'車道', next: '高岳', before: '今池', }, { sakuradouri:'今池', next: '車道', before: '吹上' }, { sakuradouri:'吹上', next:'今池', before: '御器所' }, { sakuradouri:'御器所', next:'吹上', before: '桜山', }, { sakuradouri:'桜山', next:'御器所', before: '瑞穂区役所' }, ], }, methods: { changeData: function(e) { alert(e.target.value); }, } });
changeDataというメソッドを定義して引数を受け取ると、イベントオブジェクトが入ってくるので、target.valueで取得しています。なんかもっと良い取り方があった気がするのですが、ググっても見つけられなかったので、target.valueで取ってます。値だけとれたような気がするけど…。
というわけで、これを実行しますと、現在駅名を変更した場合その変更された値がでるようになります。