JSON Numeric values ​​are converted to strings, why is that?

Question

JSON

Laravel sends vue data through props in JSON format, plus JSON wrapped in base64.
The problem is, when I upload the code to the host, numeric data in JSON is transmitted as strings, everything works fine on the local machine.
JSON from local machine:

{"current_page":1,"data":[{"id":1,"ip":"127.0.0.1","port":"80","max_online":100,"online_counter":0,"online":0,"free":0,"have_access":false,"country":{"id":1,"name":"\u0420\u043e\u0441\u0441\u0438\u044f","iso":"RU","image":"ru.png"}}],"first_page_url":"http:\/\/localhost:8000\/ru\/servers?page=1","from":1,"next_page_url":null,"path":"http:\/\/localhost:8000\/ru\/servers","per_page":15,"prev_page_url":null,"to":1}

json from server:

{"current_page":1,"data":[{"id":1,"ip":"176.31.23.118","port":"1194","max_online":"100","online_counter":"0","online":"0","free":"0","have_access":false,"country":{"id":1,"name":"\u0420\u043e\u0441\u0441\u0438\u044f","iso":"RU","image":"ru.png"}}],"first_page_url":"https:\/\/cp.siberia-vpn.com\/ru\/servers?page=1","from":1,"next_page_url":null,"path":"https:\/\/cp.siberia-vpn.com\/ru\/servers","per_page":15,"prev_page_url":null,"to":1}

Laravel View:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12 mb-3">
                <div class="card">
                    <div class="card-header">{{ __('servers.' . $title) }}</div>

                    <div class="card-body">
                        <div id="servers">
                            <servers-component :langs-prop="'{{ base64_encode(json_encode($langs)) }}'" :servers-prop="'{{ base64_encode(json_encode($servers)) }}'"></servers-component>
                        </div>

                        {{ $servers->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Vue component:

<template>
    <div class="servers">
        <server-component v-if="servers.length > 0" :langs-prop="langs" :server-prop="server" :key="key" v-for="(server, key) in servers"></server-component>
        <p class="text-center" v-if="servers.length === 0">{{ langs['no_servers'] }}</p>
    </div>
</template>

<script>
    import ServerComponent from "./ServerComponent";

    export default {
        components: {ServerComponent},
        name: "servers-component",

        props: [
            'serversProp',
            'langsProp',
        ],

        data() {
            const servers = JSON.parse(atob(this.serversProp));
            const langs = JSON.parse(atob(this.langsProp));
            
            return {
                servers: servers.data,
                langs: langs,
            };
        },

        mounted() {

        }
    }
</script>

<style scoped>

</style>

How can this be corrected?

Answer 1

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12 mb-3">
                <div class="card">
                    <div class="card-header">{{ __('servers.' . $title) }}</div>

                    <div class="card-body">
                        <div id="servers">
                            <servers-component :langs-prop="'{{ base64_encode(json_encode($langs)) }}'" :servers-prop="'{{ base64_encode(json_encode($servers, JSON_NUMERIC_CHECK)) }}'"></servers-component>
                        </div>

                        {{ $servers->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection