将数据透视表数据从 laravel 传递到 VueJS 组件答案

【问题标题】：Passing pivot table data from laravel to VueJS component将数据透视表数据从 laravel 传递到 VueJS 组件
【发布时间】：2020-12-29 01:57:42
【问题描述】：

我正在将 VueJs 组件添加到我的 Laravel 应用程序中并且我正在努力解决这个问题：

我有 2 个模型，Concessions 和 Brands，具有这样的多对多关系：

特许经营模式

  public function brands()
  {
    return $this->belongsToMany('App\Brand');
  }

品牌型号

  public function concessions()
  {
    return $this->belongsToMany('App\Concession');
  }

在控制器中，我从所有让步中获取数据并返回到视图，如下所示：

public function concessions()
{
    $concessions = Concession::all();

    return view('MyConcessionsView', compact('concessions'));
}

在我的 Laravel View 上，我可以毫无问题地访问 $concessions[0]->brands，一切正常。

所以，我添加了我的 Vue 组件，并将 prop $concessions 传递给该组件：

<concessions-map :con="{{ $concessions }}"></concessions-map>

在我的 Vue 组件上，我接受了 prop 'con'，我可以显示该数组中的所有元素。但是我需要从每个品牌的每个特许权中访问，例如，当我尝试显示 con[0].brands[0] 甚至 con[0].brands 时，它会给我错误 无法读取未定义的属性“品牌” ”。

我什至在 Mounted() 生命周期方法上将此道具传递给 State：

 mounted() {
    this.concessions = this.con;
}

在 Vue DevTools 上，我有一个包含 35 个对象的数组。但我可以访问每个对象的属性品牌。

有什么建议吗？

提前（非常感谢）！

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

$concessions = Concession::with('brands')

这就是你需要的。

当你执行时

$concessions[0]->brands

您正在向数据库发出新请求。

【讨论】：

【解决方案2】：

嗨，你可以使用 Axios 是一种更好的方式，所以
-1 在您的让步控制器中定义一个函数，以获取其品牌的每一个让步

public function getConcessions(){
    $concessions= Concession::with('brands');
    return $concessions;
}

-2 在你的 web.php 中定义一个获取这些数据的路由例如

Route::get('/concessions/getData','ConcessionController@getConcessions');

-3 使用 axios 从你的 vuejs 组件中获取数据

loadConcessions(){
             axios.get("/concessions/getData")
              .then(({data}) => {
              this.concessions = data.data

            });

别忘了在你挂载的方法中添加这个函数

mounted() {
           this.loadConcessions()

        }

-4 现在你可以显示在你的 vuejs 组件中获取的数据了

在你的情况下，你会这样做

{{concessions.brands}}

甚至你也可以使用 v-for 将其作为循环读取，例如在表格中读取它

<tr  v-for="concession in concessions.data" :key="concessions.id">
   <td class="text-center">{{concession.brands}}</td>
</tr>

所以对于每个特许权，它都会展示其品牌

【讨论】：