Laravel + Inertia + Vue Js -> cant access hasMany attributes

Question

im new to Laravel, Inertiy and Vue JS. I have to setup a project with them, which works really cool.

Now i have a problem. I have a few games and every game hasMany ads. If i get the Games with something like:

$games = Game::where(['id' => auth()->user()->current_team_id])->orderBy('created_at', 'DESC')->with('theAds')->get();

in Game.php:

  /**
     * @return HasMany
     */
    public function theAds(): HasMany
    {
        return $this->hasMany(TheAds::class);
    }

in TheAds.php:

/**
 * @return BelongsTo
 */
public function game()
{
    return $this->belongsTo(Game::class);
}

Now, if i var_dump($games[x]['theAds']->count()) it dumps the corrrect count for each game. But if i use it in Game.vue like this:

<tr v-for="(game, i) in $page.props.games" :key="game.id">
    <td class="text-center">{{ game.name }}</td>
    <td class="text-center">{{ game.theAds }}</td>
</tr>

it throws an error, that game.theAds is undefined, but game.name is set correctly.

Could please somone help me?

Greetings Mickey

Alexandr Blyakher · Accepted Answer · 2021-04-11 15:33:13Z

2

Yes, that's because it is too late to try to get data from relationships in js. You should get this data before 'eloquent models' convert to JSON

$games = Game::where(['id' => auth()->user()->current_team_id])->orderBy('created_at', 'DESC')->with('theAds')
->get()
->map(function ($e) {
                $e->theAds = $e->theAds;
                return $e;
             })

Or you can create 'ResourceCollection' that help convert 'eloquent models collection' to JSON and then you can be able to access related data https://laravel.com/docs/8.x/eloquent-resources#resource-collections

answered Apr 11, 2021 at 15:33

Alexandr Blyakher

1804 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel + Inertia + Vue Js -> cant access hasMany attributes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related