[laravel]DBから取得したレコードidをvueコンポーネントにNumber型で渡す方法

Question

現在、laravel5.8で「ある書籍についてユーザーが感想を投稿する」という機能を実装しています。

どの書籍について感想を書くのかは書籍のidから参照できるのですが、
本のidをvueコンポーネントに渡そうとすると文字列型として判定されてエラーが起きてしまいます。

 Invalid prop: type check failed for prop "book_id". Expected Number with value 8, got String with value "8".

・やったこと
公式リファレンス「属性キャスト」を元にidをintegerに設定。

protected $casts = ['id' => 'integer'];

view内でコンポーネントにidにアクセスしてpropsとして渡しています。

<impression-modal-form-component book_id="{{ $book->id }}" />

コンポーネント側ではpropsの型チェックをしています。

<script>
export default {
    props: {
        book_id: Number
        },
///// 以下略

公式を見る限り正しく設定できていると思うのですが、、、
アドバイスをいただけると幸いです。

Answer 1

属性(Attribute)として設定した値に関しては、(vueに限らず)jsで取得した時に一律文字列として取得されるのでそうなってしまうんじゃないかと思います。
Stringとして受け取るか（数値計算する訳でもなければstringでも問題ない気がするidはkeyを意味するもとのして考える）
親側のdata内にjs上の数値として展開してあげればよいかと思います。

Comments

[marutto]

アドバイスありがとうございます！

そうなんですか、jsへの受け渡しではStringになってしまうんですね・・・。
計算等はしないので一旦Stringとして取得、必要に応じてjs側で数値変換して使用しようと思います。

ありがとうございました！

[mikkame]

laravelとかPHPは関係なく、HTMLとJSの受け渡しでstring固定っぽい感じですね