Vue.jsイベントの紐づけ
laravemix

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で取ってます。値だけとれたような気がするけど…。

というわけで、これを実行しますと、現在駅名を変更した場合その変更された値がでるようになります。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事