Laravel how to properly set up communication?

Question

Laravel

There are two tables. First city:

Schema::create('cities', function (Blueprint $table) {
            $table->increments('id');
            $table->string('slug')->uniqid();
            $table->string('name');
            $table->integer('order');
            $table->timestamps();
        });

Second Players:

Schema::create('players', function (Blueprint $table) {
            $table->increments('id');
            $table->string('slug')->uniqid();
            $table->string('name');
            $table->integer('cities_id')->unsigned()->index()->nullable();
            $table->foreign('cities_id')->references('id')->on('cities');
            $table->timestamps();
        });

Each player must have 1 city. Those. in the cities_id column, I write the city ID.
Further in the models of the city I indicate that there can be many players.

class City extends Model
{
    protected $fillable = ['slug', 'name', 'order'];

    public function player(){
        return $this->hasMany('App\Player');
    }
}

The player has:

class Player extends Model
{
    public function city(){
        return $this->belongsTo('App\City');
    }
}

In the controller, I need to give JSON so that it is not an ID, but a city name. I just can’t figure it out, please help :)
In the view I have VUE, which receives our JSON through axios, and then generates html

<template>
        <table class="table table-hover">
            <thead>
            <tr>
                <td>ID</td>
                <td>Slug</td>
                <td>Имя</td>
                <td>Город</td>
            </tr>
            </thead>

            <tbody>
                <tr v-for="player,index in players">
                    <td>{{ player.id }}</td>
                    <td>{{ player.slug }}</td>
                    <td>{{ player.name }}</td>
                    <td>{{ player.cities_id }}</td>                
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>

    export default {
        data(){
            return{
                players: [],
            }
        },

        created: function()
        {
            this.fetchPlayers();
        },

        methods: {
            fetchPlayers()
            {
              let uri = '/admin/player';
              this.axios.get(uri).then((response) => {
                  this.players  = response.data;
              });
            }
        }
    }
</script>

Answer 1

You need to make a Laravel Resource
for the Player model and for City
using
In the files, write the fields that you want to get in json (id, name, etc.)
Then go to PlayerResource and connect the relationship resource in the header
Next, you add a relationship field to the Player:

public function toArray($request)
    {
        return [
             // поля модели, которые нужно отдалть в json
            'id' => $this->id,
            'name' => $this->name,        
            // Отношения
            'cities' => CityResource::collection($this->cities),
            'city' => new CityResource($this->city)
        ];
    }

In the controller in the header we connect
and pass json in the method

public function getPlayers()
  {
     $players = Player::with('cities')->get();
     return PlayerResource::collection($players); 
  }

accordingly, you fetch this method in VUE or pass it as a prop to the component from the blade.
In vue you call how player.cities or player.city
cities should be visible in devtools

Answer 2

Who is the cutest in the world?
All blush and whiter?
That's right, docks! https://laravel.com/docs/5.7/eloquent-serialization
PS More specifically, in your case, this section: https://laravel.com/docs/5.7/eloquent-serializatio...