javascript - Vue (2.6.11) - 对象道具缺少字段

Question

我有一个 Laravel-Vue 应用程序，它具有显示存储在 MySQL 数据库中的“项目”的功能。这些是通过 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']);
                            }]);
                        }]);
                    }
                ]);
            }
        ]);
    }
]);

尽管它看起来很糟糕，但它返回了一个简单的数据层次结构：

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

“网格”只是一个表格，其中包含附加到这些行的列、行和单元格。然而，除此之外，单元格还通过 with 子句加载了一些信息：它们的列、它们的行和它们的网格，我们还附加了一些更多信息到后者。这些字段对于在前端处理各种功能中的单元格非常重要，而无需检索其关联的网格/行/列等。

无论如何，查询工作正常，我们最终得到以下数组（显示一个值的 gridCells）：

它也像这样在前端收到（通过 Chrome 开发工具检索）：

但是，一旦该对象作为道具加载到 Vue 中，我们就会丢失一些信息！

如您所见，我们丢失了 grid 和 grid_col 字段，即使它们存在于响应中。我怀疑它与对象的大小有关——如果我减少查询，字段会再次出现——但我需要它们，而且似乎没有任何迹象表明这是确切的原因。我也无法在网上找到此问题的任何其他实例。那么，为什么 Vue 会破坏我的对象，有没有办法克服这个无法完全重写我的应用程序的问题？谢谢！

编辑：根据要求，这是从 Laravel 将道具加载到 Vue 的刀片模板，以及道具。

@section('content')
    <div class="container-fluid">
        <project-edit-page
            :project='@json($project)'
        />
    </div>
@endsection

在 Vue 中：

标签： javascriptphpmysqllaravelvue.js