The use of JSON_FORCE_OBJECT flag when encoding props in blade template

[nikazooz]

Hey 👋 Awesome project and thanks for open-sourcing it!

I was just wondering, is there a particular reason for using JSON_FORCE_OBJECT flag on json_encode() in the blade template?

<div id="app" data-component="{{ $component }}" data-props="{{ json_encode($props, JSON_FORCE_OBJECT) }}"></

When fully loading f.e. contacts page, Vue shows prop validation errors as the links inside contacts prop is object because of it, and Pagination component expects it to be an array.

Thanks again. Cheers!

[reinink]

Good catch! I've fixed this: 1581692

I was using JSON_FORCE_OBJECT for situations where there are no props, json_encode() results in an empty array ([]), but Inertia expects an object ({}). The problem is JSON_FORCE_OBJECT doesn't only apply to the top level, but all nested data, which is not what we want. Simply casting the $props array to an object solves this.

<div id="app" data-component="{{ $component }}" data-props="{{ json_encode((object) $props) }}"></div>