[laravel+vue]vueでフォームリクエストした際、変更していない値が空白値で書き換わる

Question

環境

サーバーサイド
Laravel

フロントエンドサイド
Vue
ログインにはjwt-auth使用 参考

DB

Laravelの標準のユーザーテーブル
$ php artisan make:auth
$ php artisan migrate
↓以下テーブル生成
users_table
id（A_I）
name
email
password（b-cryptによりハッシュ化されて登録される設定）
remenber_token
created_at
updated_at

できていること

vueとLaravel間で値を受け渡しと受け取り
新規登録・ログイン・ユーザー情報描画まで実装済

問題点

ユーザーテーブルのname・emailカラムのみ編集フォームを実装し、
変更はできたのですが、なぜか指定してないpasswordカラムに空白値（nullではない）が入ってしまいます（空文字にハッシュ化された状態）。
また、それならpasswordカラムに同値を入れればいいのかと思い、やってみたところ
b-cryptでハッシュ化されているため、この値でDBを入れ替えるとさらにハッシュ化されてしまいうまく整合できなくなってしまいます。

要件

nameとemailのみ変更
（変更していないカラムが勝手に変わらないようにしたい）

現在のコード

<template>
    <div class="container">
        <div v-if="!editFlg">
            ID: {{ user.id }}<br />
            ユーザー名: {{ user.name }}<br />
            メール: {{ user.email }}<br />
            登録日: {{ user.created_at }}<br />
            更新日: {{ user.updated_at }}
        </div>

        <form v-else>
            <input type="text" name="name" v-model="user.name">
            <input type="email" name="email" v-model="user.email">
        </form>
        <button v-if="!editFlg" @click="(editFlg = true)">編集</button>
        <button v-else @click="onUpdate">更新</button>

    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                isError: false,
                user: {},
                editFlg: false,
                updated: false
            }
        },
        created() {
            axios.get('/api/me').then(res => {
                this.user = res.data;
            }).catch(error => {
                this.isError = true;
            });
        },
        methods: {
             onUpdate: function() {
                 axios.put('/api/users/' + this.user.id, {
                     name: this.user.name,
                     email: this.user.email,
                 })
                 .then( (res) => {
                     this.editFlg = false;
                     this.updated = true;
                     console.log('update')
                 }).catch(error => {
                     this.isError = true;
                 });
             }
         },
    }
</script>

Laravelコード

//app/User.php
namespace App;

use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements JWTSubject
{
    use Notifiable;

    protected $fillable = ['name', 'email', 'password'];
    protected $guarded = ['id' ];
    protected $hidden = ['remember_token',];

    public function getJWTIdentifier()
    {
        return $this->getKey();
    }

    public function getJWTCustomClaims()
    {
        return [];
    }
}

//app/Http/Controllers/AuthController.php
namespace App\Http\Controllers;

class AuthController extends Controller
{
    function login() {
        $credentials = request(['email', 'password']);

        if (!$token = auth('api')->attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }

    public function logout()
    {
        auth()->logout();
        return response()->json(['message' => 'ログアウトしました。']);
    }

    public function me()
    {
        return response()->json(auth()->user());
    }

    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => auth("api")->factory()->getTTL() * 60
        ]);
    }
}

//app/Http/Controllers/UserController.php
namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;
use App\Http\Resources\User AS UserResource;

class UserController extends Controller
{
    // 一覧表示
    public function index() {
        return UserResource::collection(User::all());
    }

    // 保存
    public function store(Request $request) {
        $user = new User;
        $user->name = $request->input('name');
        $user->email = $request->input('email');
        // bcrypt関数でハッシュ化してくれる
        $user->password = bcrypt($request->input('password'));

        $user->save();
    }

    // １データ表示
    public function show(User $user) {
        return new UserResource($user);
    }

    // 更新
    public function update(Request $request, User $user) {
        $user->name = $request->input('name');
        $user->email = $request->input('email');
        // bcrypt関数でハッシュ化してくれる
        $user->password = bcrypt($request->input('password'));
        $user->save();
    }

    // 削除
    public function destroy(User $user) {
        $user->delete();
    }
}

//app/Http/Resources/User.php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\Resource;

class User extends Resource
{
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->email,
            'password' => $this->password,
            'date' => $this->created_at->format('Y-m-d H:i:s'),
        ];
    }
}

//routes/api.php

use Illuminate\Http\Request;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/login', 'AuthController@login');

Route::group(['middleware' => 'auth:api'], function () {
    Route::get('/me', 'AuthController@me');
    Route::post('/logout', 'AuthController@logout');
});

Route::resource('users', 'UserController');

//routes/web.php

Route::get('/home', 'HomeController@index')->name('home');

Route::any('{all}', function () {
    return view('app');
})->where(['all' => '.*']);

//resources/views/app.blade.php

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Job+</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/clearfix.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/style.css') }}" rel="stylesheet">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div id="app">
   <app></app>
   <router-view></router-view>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>

Comments

[mikkame]

Vue側は問題ないように思えます。Laravel側のコードはどんな感じでしょうか。

[DaisukeMori]

Laravel側追加しました。

Answer 1

// 更新
    public function update(Request $request, User $user) {
        $user->name = $request->input('name');
        $user->email = $request->input('email');
        // bcrypt関数でハッシュ化してくれる
        $user->password = bcrypt($request->input('password'));
        $user->save();
    }

ここで必ずpasswordが更新されています。
passwordがセットされていれば、更新、されていなければ何もしない、という風にする必要があります

Vueは関係ないので、取り敢えず普通のFORMかPOSTMANで期待の動作をするかどうか確かめてから
Vueが問題か考えてみてはどうでしょうか？

Comments

[DaisukeMori]

ご回答ありがとうございました。
パスワードリクエストがあったらという分岐をつくってあげたら、
パスワードが意図なく書き換わることがなくなりました。

一応修正コードアップしておきます。

```
//app/Http/Controllers/UserController.php

//中略

// 更新
public function update(Request $request, User $user) {
$user->name = $request->input('name');
$user->email = $request->input('email');

// パスワードリクエストがあったら書き換え（なければ何もしない）
if($request->input('password')) {
$user->password = bcrypt($request->input('password'));
}

$user->save();
}

//中略

```