将 Laravel 数据传递给 Vue 组件答案

【问题标题】：Pass Laravel data to Vue component将 Laravel 数据传递给 Vue 组件
【发布时间】：2019-10-07 12:05:23
【问题描述】：

我正在创建一个使用 Vue 路由器的单页应用程序 (SPA)，因此它主要由 Vue 组件和一个刀片组件组成，该刀片组件使用

<router-view></router-view>

我想知道如何传递在我的控制器中计算的数据并将其传递给 Vue 组件。我目前的做法是公开额外的 API 端点，例如在我的控制器中：

public function countUsers()
{
        $userCount = DB::table('users')->count();
        return $userCount;
}

然后在api.php中：

Route::get('usercount', 'UserMController@countUsers');

这样我可以使用axios.get 调用usercount 在我的Vue 组件中获取数据。

有没有更好的方法来做到这一点？数据似乎需要 1-2 秒才能显示在页面上，我无法想象这个实现需要进行 20 多次计算。

我看到了另一种方法，您可以使用刀片模板将数据附加到 JavaScript 上下文中，但我不知道如何让它适用于带有 Vue 路由器的 SPA。

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

在您的控制器中获取 userCount 并将其传递给普通刀片文件。您可以像下面这样在 vue 中传递变量。

<router-view userCount="{{userCount}}"></router-view>

那么为了访问 vue 中的 userCount 变量，你可以从 props 中加载这个变量。

export default {
  props: ['userCount'],
  name: 'router-view',
},
mounted:function(){
    let a = this;
    this.userCount = JSON.parse(this.userCount)
}

要了解更多信息，您应该先阅读文档。它将帮助您彻底理解。 https://vuejs.org/v2/guide/components-props.html

【讨论】：