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

#制作環境

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

#はじめに

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


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

#関連記事

[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～事前準備編～](https://qiita.com/Charry/items/737085257784bd9fb6e2)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript編～](https://qiita.com/Charry/items/f605cbb686e8c0796450)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery編～](https://qiita.com/Charry/items/74c66aea1a82070a6d3d)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × axios編～](https://qiita.com/Charry/items/ffd6db72de2c2be96e43)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × axios編～](https://qiita.com/Charry/items/0241c1b6a903c42cd9de)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～JavaScript × FetchAPI編～](https://qiita.com/Charry/items/8297146146a6b729c8f6)
[Laravel 6.x 非同期通信(Ajax) 【JavaScript】 【jQuery】 【axios】 【Vue.js】 各記述方法 ～jQuery × FetchAPI編～](https://qiita.com/Charry/items/9f22f61e5ef455b83ecb)

#今回作成するもの

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

##以下作成条件

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

#app.jsの編集

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

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

```JavaScript:app.js
require('./test');
```

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

```JavaScript: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
            })

        }
    }
});
```

#コンパイル

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

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

```PHP
npm run dev
```

#ビューの修正

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

```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の場合データの受け渡し方法がわかっていないと、ちょっとわかりづらいですね。

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