[Vuejs]-Laravel REST API with Polymorphic Relationship with nested JSON

by

2👍

✅

In your Games model you need write something like this:

public function images()
{
    return $this->hasMany('App\Images', 'imageable_id', 'id')
        ->whereImageableType('App\Game');
}

And when you take your games:

return Games::select()
        ->with('images')
        ->get();

2👍

If someone happens to find this, this is what I ended up having to do. I am using Laravel 5.3:

/*Game Model*/

public function images()
{
    return $this->morphMany('App\Image', 'imageable');
}

/*Image Model*/

public function imageable()
{
    return $this->morphTo();
}

/*Games Controller*/

public function index()
{
    $games = Game::with('images')->get();

    return $games;
}

=====================================
Here is the JSON it returns:
{
    id: 1,
    title: "As she said to.",
    slug: "as-she-said-to",
    description: "Consequatur at qui iusto.",
    created_at: "2016-09-29 12:04:36",
    updated_at: "2016-09-29 12:04:36",
    images: [
        {
            id: 1,
            url: "http://www.mobygames.com/images/covers/l/281002-rayman-legends-xbox-one-front-cover.png",
            imageable_id: 1,
            imageable_type: "App\Game",
            created_at: "2016-09-29 12:04:36",
            updated_at: "2016-09-29 12:04:36"
         }
      ]
    }

========================================
Then in my Vue.js front-end:

<img v-bind:src="game.images[0].url" class="img-responsive"/>

Leave a comment