Vue.jsの事書き始めて3回目です。LaravelMix上でVue.jsを利用していますが、Vue.jsを読み込みさえしていれば、コードは利用できますので、LaravelMixじゃない人でも学習の参考になるはずです。ほんとは今日はフォームとのデータやり取りまでやりたかったのですが、頭で思ってるものを文字にすると、頭で必要だと思っていた文字数と凄い乖離があるので、イベントの紐づけまでにしました。なんかまとめるのは難しいですね。日々精進します。それではよろしくお願いします。
INDEX
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で取ってます。値だけとれたような気がするけど…。
というわけで、これを実行しますと、現在駅名を変更した場合その変更された値がでるようになります。
