如何将 vue 数据显示到 Laravel 刀片?
Posted
技术标签:
【中文标题】如何将 vue 数据显示到 Laravel 刀片?【英文标题】:how can I display vue data to Laravel blade? 【发布时间】:2020-01-27 12:07:01 【问题描述】:我有一个使用 Laravel + vue.js 的项目。 我制作了一个 vue 组件,它从控制器中获取一些数据。 我想使用 v-for 在视图中显示数据,但没有显示任何内容。
vue 模板代码
<template>
<div v-for="val in expiredios" class="card col-xs-12 col-md-5 col-lg-2 m-1 p-0 d-inline-block">
<div class="mx-0 p-2 text-truncate" style="width:10rem;vertical-align:middle;">
val.app_name
</div>
</div>
...
</template>
vue 脚本部分
export default
data: function()
return
expiredIos: []
,
mounted()
console.log("expired here");
this.getExpiredIosData();
,
methods:
getExpiredIosData: function()
axios.post('/expired')
.then(response =>
for (var i = 0; i < response.data.length; i++)
this.expiredIos[i] = response.data[i];
console.log(this.expiredIos[i]);
);
,
console.log
的结果
app_name: "app1", app_id: "migunstyle", ios_dev_exp: "2019-01-16"
app_name: "app2", app_id: "jcalling", ios_dev_exp: "2019-02-19"
app_name: "app3", app_id: "modoobebe", ios_dev_exp: "2019-03-08"
app_name: "app4", app_id: "babyfactory", ios_dev_exp: "2019-03-19"
app_name: "app5", app_id: "merrygirl", ios_dev_exp: "2019-03-21"
...
我在这里做错了什么?
【问题讨论】:
【参考方案1】:尝试将整个数组直接设置为 data 属性。
getExpiredIosData: function()
axios.post('/expired')
.then(response =>
this.expiredIos = response.data; // <-- Set property directly
);
Vue 会跟踪所有数据属性,但它无法跟踪数组更改。您需要使用内置的数组操作函数或完全替换数组以便 vue 获取更改。
https://vuejs.org/v2/guide/list.html#Array-Change-Detection
【讨论】:
尝试使用Vue dev tools查看数据是否正确设置为您的组件状态。 我不知道为什么,但不知何故 vue 开发工具在我的项目中不起作用。 好的,问题是我必须像expiredIos: []
这样声明 expiredIos
变量。我不明白,但无论如何......而且@Jerodev 解决方案有效。谢谢。以上是关于如何将 vue 数据显示到 Laravel 刀片?的主要内容,如果未能解决你的问题,请参考以下文章
如何将数据从 vue 组件传递到 laravel 中的视图(HTML)
LARAVEL + Vue.js:使用刀片在 MPA 中显示整个页面的 vue.js 组件,对 SEO 不友好