Laravel + Vue.js + axios로 비동기 post 요청을 보내려고 할 때의 빠진 포인트 (모두 실수 실수)를 정리했다

타이틀과 기사를 폼에 입력해 서버에 송신해 DB에 등록하는 간단한 처리를 axios를 사용해 실현하려고 했을 때에 실수 실수로 조금 시간이 걸렸기 때문에 실수한 포인트를 정리할 때입니다.

■ 전제

・Laravel5.4
· Vue.js2.x
・axios

■ 최종 소스 코드

API 측

// routes/api.php
Route::group(['middleware' => 'api'],function(){
    Route::post('/article/{id}',function($id){
        $user = App\User::where('id',$id)->first();

        $article = new App\Article();
        $article->title = request('title');
        $article->content = request('content');

        $user->articles()->save($article);

        return ['title' => request('title'),'content' => request('content')];
    });

});

Vue 컴포넌트 측

<!--resources/assets/js/components/Articles/Create.vue-->
<template>
    <div>
        <div>
            <h4>記事投稿</h4>
            <div>
                <input v-model="title" type="text" name="title" placeholder="タイトル">
                <textarea v-model="content" class="form-control" rows="4" placeholder="コンテンツ"></textarea>
                <p>{{ title }}</p>
                <p>{{ content }}</p>
                <button v-on:click="postArticle">投稿</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        // メソッドの実行
        // created() {
        // },
        // メソッドで使う&テンプレート内で使う変数を定義
        data() {
            return {
                title:'',
                content:''
            }
        },
        // (読み込み時に)実行するメソッド
        methods: {
            postArticle(){
                var article = {
                    'title': this.title,
                    'content': this.content
                };
                var id = 1;
                axios.post('/api/article/' + id,article).then(res => {
                    console.log(res.data.title);
                    console.log(res.data.content);
                });
            }

        }
    }
</script>

■ 미스한 포인트

①패스에 api를 붙여 잊어

처리를 api.php에 기술하고 있을 때는, axios의 패스에 api를 설정하지 않으면 안됩니다만, 그것을 붙여 잊었습니다.

// Create.vue
axios.post('/api/article/' + id,article).then(res => {
  console.log(res.data.title);
  console.log(res.data.content);
});

②v-model로 데이터를 취득할 때의 기술 실수

예를 들어 v-model에서 title와 content를 설정한 경우, 입력된 데이터를 methods로 사용하려면 다음과 같이 this를 붙인다.

methods: {
   postArticle(){
     var article = {
       'title': this.title,
       'content': this.content
     };
  }

※템플릿내에서 사용하는 경우는 this를 붙일 필요는 없다

<p>{{ title }}</p>

어쨌든 data()에서 변수를 선언해야합니다.

data(){
  return {
    title:'',
    content:''
  }
}

③Article 모델, User 모델에 메소드 정의

User 모델에 메소드를 정의하지 않아서 api.php에서의 처리가 완결되지 않았다.

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    public function articles()
    {
        return $this->hasMany(Article::class);
    }
}

■ 비동기 처리의 에러를 확인하는 방법

비동기 처리의 경우, api 측에서의 에러가 페이지에 표시되지 않고 console 에는 javascript 측의 에러 밖에 나오지 않기 때문에, 에러의 상세를 확인할 수 없다 ~라고 고민하고 있었지만, GoogleChrome의 개발자 툴로 스택 트레이스 를 볼 수 있는 장소를 찾아서 살아났습니다.

그 장소는
Elements나 Console과 나란히 있는 「Network」라고 하는 부분.
그 중의 「Name」이라고 하는 패널내에 붉게 표시되어 있는 부분이 에러가 발생하고 있는 부분입니다.
빨간색 부분을 클릭하면 'Name'의 오른쪽에 정보가 나오므로 'Preview'를 클릭하면 에러가 발생한 경우에는 거기에 스택 트레이스가 표시되었습니다.
비동기식이 아닌 경우 페이지에 표시되어야 하는 오류가 이 'Preview'에 표시되는 것 같습니다.


이상, 참고가 되면 다행입니다.