03_2_6_Vue.jsとの連携 - hpscript/laravel GitHub Wiki

Vue.jsでLaravelのリレーション(belongsTo, hasMany)の値を表示

Messageモデル

  • usersテーブルに対し、messagesテーブルがbelongsToのリレーション関係
public function user(){
        return $this->belongsTo('App\User');
    }

controller

$messages =Message::where(function($q) use ($foo, $hoge){
// 省略
})->orderBy('***','ASC')->get();

通常時のblade

  • $message->user->name で名前を呼び出す
@foreach($messages as $message)
// 省略
{{ $message->user ? $message->user->name : '削除済ユーザ' }}
// 省略
@endforeach

Vue.js使用時

controller

  • with('user')でユーザテーブルの情報も取得する
return Message::with('user')->where(function($q) use ($foo, $hoge){
// 省略
})->orderBy('***','ASC')->get();

blade

  • vueで表示する際は、m.user.name と書く
<div v-for="m in messages">
  // 省略
  <span v-text="m.user.name"></span>
  // 省略
</div>
⚠️ **GitHub.com Fallback** ⚠️