Vue (2.6.11) – object prop missing fields

  javascript, laravel, mysql, php, vue.js

I have a Laravel-Vue application that has the function of displaying "projects" stored in a MySQL db. These are complicated objects which are retrieved with the following query via Eloquent:

return $this->load([
    'projectVersions' => function($query) {
        $query->with([
            'values' => function($valueQuery) {
                $valueQuery->with([
                    'grid' => function($gridQuery) {
                        $gridQuery->with(['gridCols', 'gridRows.gridCells' => function($cellQuery) {
                            $cellQuery->with(['gridCol', 'gridRow', 'grid' => function($subGridQuery) {
                                $subGridQuery->with(['reference', 'lastGridRow', 'lastGridCol']);
                            }]);
                        }]);
                    }
                ]);
            }
        ]);
    }
]);

Although it looks horrible, it returns a straightforward data hierarchy that goes:

$project
    -> $projectVersion
        -> $values
            -> $grids
                -> $gridCols, $gridRows
                    -> $gridCells...

A "grid" is just a table with cols, rows, and cells that are attached to those rows. In addition however, the cells are also loaded with some information via a with-clause: their column, their row, and their grid, to the latter of which we also attach some more information. These fields are important for handling a cell in various functions on the front-end without having to retrieve its associated grid/row/col etc.

The query works fine, in any case, and we end up with the following array (showing the gridCells of one value):
how the result looks on the back-end

which is also received on the front-end like so (retrieved through Chrome dev tools):

response retrieved through the Network tab in Chrome dev tools

However, once that object is loaded as a prop into Vue, we lose some of the information!

retrieved from the Vue inspect tools

As you can see, we’ve lost the grid and grid_col fields, even though they were present in the response. I suspect it has something to do with the size of the object – if I cut down the query, the fields show up again – but I need them and there doesn’t seem to be any indication anywhere that this is the exact cause. I also cannot find any other instances of this issue online. So, why might Vue be mangling my objects, and is there a way to overcome this short of completely rewriting my app? Thanks!

Source: Laravel

Leave a Reply