制作環境

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】各記述方法～事前準備編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～JavaScript編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～jQuery編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～JavaScript × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～jQuery × axios編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～JavaScript × FetchAPI編～
Laravel 6.x 非同期通信(Ajax) 【JavaScript】【jQuery】【axios】【Vue.js】各記述方法～jQuery × FetchAPI編～

今回作成するもの

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

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

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

制作環境

はじめに

関連記事

今回作成するもの

以下作成条件

app.jsの編集

コンパイル

ビューの修正

v-model

@input

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

制作環境

はじめに

関連記事

今回作成するもの

以下作成条件

app.jsの編集

コンパイル

ビューの修正

v-model

@input

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