LaravelからVueコンポーネントに渡した数値が勝手に丸められる

Question

前提・実現したいこと

LaravelのブレードからVueのコンポーネントに大きい数値を渡すと値が勝手に丸められるので、それを解消したい。

【質問内容】
Laravel + Vue.jsでWebサービスを作っています。

Twitter APIを使って、Twitter IDを取得し、それをデータベースに保存して、色々処理を書いているのですが、LaravelのコントローラーでIDを取得、Bladeへデータを返却、Vueのコンポーネントへ値を渡すとIDの値が丸められてしまいます。

発生している問題・エラーメッセージ

エラーが出ているわけでは無いですが、16桁を超えると値が丸められるようです。

例：
ID：770983194769760257
→ID：770983194769760300になる。

ID：1128913499994779648
→ID：1128913499994779600になる・

該当のソースコード

//コントローラー側の処理
public function index(){

    // アカウント取得
    $accounts = TwitterAccount::where('user_id',Auth::id())->get();

    return view('mypage',['accounts' => $accounts]); 
}

//Blade（該当箇所のみ）
<!-- メイン部分-->
@section('content')
    <mypage-component
    :accounts="{{ $accounts }}"
    >
    </mypage-component>
@endsection

//一部省略
<template>
 <div>{{accounts}}</div>
</template>

<script>
    export default {
       props:['accounts'],
        data: function() {
          return {
            accountList: this.accounts,
          }
        }
    }
</script>

試したこと

Blade内で、{{ $accounts }}の値を確認すると、丸められていないことは確認済です。
Vueに渡って、値を表示するとなぜかIDが丸められてしまいます。

補足情報（FW/ツールのバージョンなど）

Laravel：5.8
Vue：2.5.17

データベースのTwitter IDカラムはBigIncrementsで作成しています。

Answer 1

「Vue.jsで」だと最近ここで話が進んでるっぽい。
つまりまだ対応してない。
https://github.com/vuejs/vue/issues/11126
:accounts="{{ $accounts }}"で複数アカウントを渡してるなら↑これとは少し違う話かも。
IDだけ渡してみると同じ。

Vueのtemplateに直接書かずaxiosで取得なら対策はある。
http://buchio.ever.jp/axios-bigint/
Laravel+Vueならaxios使うほうが普通の作り方。

Comments

[naoya0102]

早速の、回答ありがとうございました！
頂いた情報をもとに、対応方法を検討してみます。

Answer 2

Vueが丸めているのではなく、JSがその数列をbigintではなくNumberと解釈するのが原因かと思われます。
例えばブラウザのコンソールで

console.log(770983194769760257)
console.log(770983194769760257n)

とするだけでも自動的に丸められているのがわかるかと思います。
idは計算するものでもないので、文字列として渡してあげるのが良いかと思います。

下記は未検証だが文字列化に役立つかもしれない情報

• modelにpublic $incrementing = false; // を追加idを文字列として扱います
• json_encode を明示的を通してjson化する（NUMERICCHECKフラグがあると勝手に数値化するので）

をすると改善するかもしれません。

Comments

[naoya0102]

早速の回答ありがとうございます。
おかげで、原因はわかったので、どう対応するか検討してみます。