我正在创建一个使用 Vue Router 的单页应用程序 (SPA),因此它主要由 Vue 组件和一个 Blade 组件组成,使用
<router-view></router-view>
我想知道如何传递在我的 Controller 中计算的数据并将其传递给 Vue 组件。我目前的做法是公开额外的 API 端点,例如在我的 Controller 中:
public function countUsers()
{
$userCount = DB::table('users')->count();
return $userCount;
}
然后在 api.php 中:
Route::get('usercount', 'UserMController@countUsers');
通过这种方式,我可以使用 axios.get
调用 usercount
来获取我的 Vue 组件中的数据。
有更好的方法吗?数据似乎需要 1-2 秒才能显示在页面上,我无法想象我需要执行超过 20 次计算的实现。
我见过另一种方法,您可以使用 blade 模板将数据附加到 JavaScript 上下文中,但我不确定如何使用 Vue 路由器将其用于 SPA。
最佳答案
在您的 Controller 中获取 userCount 并将其传递给普通 Blade 文件。您可以像下面这样在 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://v2.vuejs.org/v2/guide/components-props.html
关于javascript - 将 Laravel 数据传递给 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56232454/