MVC - 使用Javascript

Question

我正在开发一个使用Laravel（适用于PHP的MVC框架）和Vue.js的在线商店，但我认为我会遇到与其他技术相同的问题。

数据库上的My Products表有一些参数，例如id，name，description ...，图像的url存储在数据库的其他表中。产品有许多图像，图像属于一种产品。

如果我从de数据库中获取产品，它很容易并且工作正常。这是ProductController（Laravel代码）并且工作正常：

$products = $categories->find($categoryId)->products()->get();
Product::setMainThumbnailForCollection($products);
dd($products); //dd = die dump => var_dump + die

我收集了一个包含所有产品的数组项目。数据库属性位于内部，数组称为属性，缩略图URL位于该数组之外。请记住，imageUrl来自另一个数据库：

我在我的Product模型中设置了imageUrl，并且工作正常：

foreach($products as $product){
    $product->mainThumbnail = $this->getAndSetMainThumbnail($product); 
}

我将产品系列发送到de view，这是我使用vue.js的时候。所以我可以使用Javascript访问产品，但只能访问我之前解释过的属性数组内部的那些属性：

<!-- send products to template this is stil php -->
<products list="{{ json_encode($products) }}"></products>

<template id="products-template">
    <!-- here we're using now javascript -->

    <div v-for="product in list">
        <!-- vue.js for loop. I can't access to the thumbnail URL I take from the other database -->
        @{{ product.id }} //WORKS: I have access
        @{{ product.mainThumbnail }} //DOESN'T WORK: I have no access to this property
        <!-- rest of the code -->
        <!-- ... -->

我认为应该是将图像URL附加到ProductController中的属性的方法，但我还没有找到方法。