从 Laravel 控制器向 Vue.js 发送数据可以通过以下几种方式实现:
public function index()
{
$data = ['name' => 'John', 'age' => 25];
return view('my-view', compact('data'));
}
然后,在 Blade 模板中使用 Vue.js 绑定数据:
<div id="app">
<p>Name: @{{ data.name }}</p>
<p>Age: @{{ data.age }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
data: @json($data)
}
});
</script>
public function getData()
{
$data = ['name' => 'John', 'age' => 25];
return response()->json($data);
}
然后,在 Vue.js 中使用 Axios 发送请求并获取数据:
axios.get('/api/data')
.then(response => {
this.data = response.data;
})
.catch(error => {
console.log(error);
});
public function index()
{
$data = ['name' => 'John', 'age' => 25];
return view('my-view', compact('data'));
}
然后,在 Blade 模板中引入编译后的 JavaScript 文件,并使用 Vue.js 绑定数据:
<div id="app">
<p>Name: @{{ data.name }}</p>
<p>Age: @{{ data.age }}</p>
</div>
<script src="{{ mix('js/app.js') }}"></script>
在编译前,需要在 Laravel Mix 的配置文件中添加 Vue.js 相关的配置。
以上是从 Laravel 控制器向 Vue.js 发送数据的几种常见方式,具体选择哪种方式取决于项目需求和开发习惯。
“中小企业”在线学堂
云+社区技术沙龙[第6期]
DBTalk技术分享会
Techo Day
serverless days
腾讯云GAME-TECH游戏开发者技术沙龙
云+社区技术沙龙[第10期]
云+社区开发者大会(杭州站)
技术创作101训练营
云+社区技术沙龙[第28期]
领取专属 10元无门槛券
手把手带您无忧上云