laravel - 从相关表中获取数据到 laravel 中的 vuejs 组件

Question

我的 vue 组件在每个视图中作为侧边栏加载，使用 3 个级别的对象，我将根据数据库数据动态填充它

data() {
    return {
        collection: [
            {
                id: 1,
                title: "Blue Collection",
                categories: [
                    {
                        id: 1,
                        title: "Large Format",
                        items: [
                            {
                                id: 1,
                                title: "BL 250",
                            },
                            {
                                id: 2,
                                title: "BL 260",
                            },
                        ]
                    },
                    {
                        id: 2,
                        title: "Small Format",
                        items: []
                    }
                ]
            },
            {
                id: 2,
                title: "Lavender Collection",
                categories: [
                    {
                        id: 1,
                        title: "Medium Format",
                        items: []
                    },
                    {
                        id: 2,
                        title: "Small Format",
                        items: []
                    },
                ]
            },
            {
                id: 3,
                title: "Violet Collection",
                categories: [
                    {
                        id: 1,
                        title: "Large Format",
                        items: [
                            {
                                id: 1,
                                title: "VL 400",
                            },
                            {
                                id: 2,
                                title: "VL 420",
                            },
                            {
                                id: 3,
                                title: "VL 300",
                            },
                        ]
                    },
                ]
            },
        ],
    }
},

我怎样才能collection: []在开始时有空，根据当前数据库表动态填充

我当前的表格模型

// Grand Parent
class Collection extends Model
{
    public function categories() {
        return $this->hasMany('App\Category', 'collection_id');
    }

    public function items() {
        return $this->hasManyThrough('App\Item', 'App\Category');
    }
}


// Parent
class Category extends Model
{
    public function items() {
        return $this->hasMany('App\Item', 'category_id');
    }

    public function collection() {
        return $this->belongsTo('App\Collection');
    }
}


// Child
class Item extends Model
{
    public function categories() {
        return $this->belongsTo('App\Item', 'item_id');
    }
}

而且我不知道正确Controller，因为它是侧边栏视图的一部分

class CollectionController extends Controller
{
    public function index() {
        $collection = Collection::with('categories')->get();

        // according to sidebar position which uses in all pages, which view needed or is it correct way to load data here?
        return view('???')->with(['collection' => $collection]);
    }
}

标签： laravelvue.jsuiviewcontrollerlaravel-blade