More than 3 years have passed since last update.

Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～Vue.js × axios編～

Last updated at 2020-11-30Posted at 2020-11-28

#制作環境

Windows 10
Laravel : 6.18.35
Laravel/ui : 1.0
Laravel-mix : 5.0.1
Bootstrap : 4.0.0
axios : 0.19
Vue : 2.5.17
XAMPP
PHP : 7.4.3
Visual Studio Code

#はじめに

この記事はプログラミングをはじめたばかりの素人が、できたことをメモするのに利用しています。
内容には誤りがあるかもしれません。

前回のつづきになります。

#今回作成するもの

Vue.jsとaxiosを利用し非同期通信を行い、自動で仕入れ先が入力される機能を実装します。

##以下作成条件

Vue.jsを使用し通信にはaxiosを使用します。
数字が4桁入力されたら自動で仕入れ先を検索し、反映します。
検索するのにクリック操作を必要としません。inputに入力されたら検索します。
スクリプトの読み込みにはLaravel-mixを使用します。
前回作成したtest.jsは使用しません。

#app.jsの編集

今まで使用してきたtest.jsは今回使用しません。

resources>js内のapp.jsを開き、読み込みがされないように以下の内容をコメントアウトするか、削除してください。

app.js

require('./test');

続けてVue.jsの記述を行います。
app.jsの下の部分に記載があるconst app = new Vueを以下の用に修正します。

app.js

// 変数appにVueクラスをインスタンス化(実体化)して代入します
// その際引数で初期設定を渡します
const app = new Vue({
    // id="app"のDOM要素に対しVueインスタンスを与えます
    // このidをもつ要素の範囲がVue.jsが使える範囲(仮想DOM)になります
    el: '#app',

    // キーと値の初期値を設定します
    data() {
        return {
            code: '',
            supplier: '',
        }
    },
    // メソッド(機能)を作成します
    methods: {
        // 新たにgetSupplierというメソッドを作成し、処理を記述します
        getSupplier() {

            // bladeテンプレートipnutの値をtraderCodeに代入します
            let traderCode = this.code

            // 業者コードが4桁未満の場合は検索させないようにします
            if (traderCode.length < 4) {
                return
            }

            // アクセス先のURLを作成し、urlに代入します
            let url = '/form_search?trader_code=' + traderCode

            // 次の処理の中ではthis.supplierのように、thisを使えないため
            // 任意の変数に代入することで使えるようにします
            var that = this

            // axiosで指定したURLにGETでアクセスします
            // .thenで通信に成功した場合の処理を記述します
            // 引数に変数をいれることで、コントローラからのデータ(検索結果)を受け取れます
            // ここでは変数responseでデータを受け取っています
            axios.get(url).then(function(response) {
                // 受け取ったデータから必要なものだけ取り出し変数に代入します
                let data = response.data
                // 受け取ったデータ(検索結果)が仕入れ先のvalueに反映されるよう
                // supplierに値を代入します
                that.supplier = data[0].trader_name
            })

        }
    }
});

#コンパイル

ターミナルを起動し、以下を実行してください。
※node.jsが必要です。インストールされていない方は、インストールを行ってください。

node.js
https://nodejs.org/ja/

npm run dev

#ビューの修正

resources>views内のindex.blade.phpを開き、以下の部分だけ修正します。

index.blade.php

<div>
    <label>業者コード: <input type="text" id="code" v-model="code" @input="getSupplier()"></label>
    <label>仕入れ先: <input type="text" id="supplier" name="supplier" v-model="supplier"></label>
</div>

##v-model

v-modelを記述するだけで、双方向データバインディング(Two-way Data Binding)を実装できます。

以前記事を投稿しているので、詳しくはこちらを確認してください。
https://qiita.com/Charry/items/a1e6a93f05c7f686b505

##@input

@inputはv-on:inputの省略型です。
今回は業者コードが入力されたら検索処理を行うので、@input="getSupplier()"とすることでgetSupplierメソッドを呼び出しています。

Vue.jsの場合データの受け渡し方法がわかっていないと、ちょっとわかりづらいですね。

以上で終了です。
お疲れさまでした。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～Vue.js × axios編～

Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～Vue.js × axios編～