- 首页
- PHP
- Vue.js 获取 Laravel API JSON 数据
Vue.js 获取 Laravel API JSON 数据
[英] Vue.js fetching Laravel API JSON data
本文介绍了Vue.js 获取 Laravel API JSON 数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在制作一个基于 Laravel 和 Vue.js 的应用程序.在主页上，我尝试输出带有照片的项目类别，它只需要类别标题和描述，但是从 API JSON 获取照片时遇到问题:
<代码>{数据": [{身份证":1，"title": "布拉","description": "Bla Bla Bla",项目": []，照片": [{身份证":5，"文件名": "1.jpg",project_id":空，"category_id": 1,"created_at": "2019-09-19 12:52:16","updated_at": "2019-09-19 12:52:16"}]},{}，{}]}我的 vue.js 模板在下面，但输出根本不显示基于文件名的照片，在 chrome 开发工具上检查时它显示 - src="/img/undefined".看起来这里有一些错误，但我找不到.
<div><div class="row" v-bind:pagenumber = "pagenumber"><div class="col-sm-12 col-md-12 col-lg-12" v-for="laravelData.data 中的类别" :key="category.id"><a :href="'/category/' + category.id"><div class="projects-thumb" ><img :src="/img/+ category.photo.filename" class="img-responsive" alt=""><h3 class="pt-3">{{ category.title }}</h3><div class="projects-overlay"><div class="projects-item"><p class="mt-4 text-white">{{ category.description }}</p>
</a>
<脚本>导出默认{数据() {返回 {类别: {}，照片: []，laravel 数据:{}，ID: ''，成功:真的，显示模式:假，页码:1，actionmsg: '',}},方法: {类别列表(页面){if (typeof page === 'undefined') {页 = 1;}this.$http.get('/api/category').then((response) => {this.laravelData = response.data.photo;this.pagenumber = 页；});}},安装(){this.categoryList();}}
有人可以帮助我，因为我在 laravel 和 vue.js 文档页面上找不到任何解决方案.
解决方案
我自己在 vue 模板中做了一些更正.更改:
<img :src="/img/+ category.photo.filename" class="img-responsive" alt="">
到:
<img :src="/img/+ category.photo[0].filename" class="img-responsive" alt="">
和
axios.get('/api/category').then((response) => {this.laravelData = response.data.photo;this.pagenumber = 页；});
到:
axios.get('/api/category').then((response) => {this.laravelData = response.data;this.pagenumber = 页；});
所以现在模板从数据库输出正确的图像，基于 JSON 数据，但看起来这只是一种解决方法.也许有人可以根据良好实践建议最佳选择?
I'm making a Laravel and Vue.js based app. On the main page I try to output projects categories with photos, it takes only category title and description, but I have a problem to fetch photos from API JSON:
{
"data": [
{
"id": 1,
"title": "Bla",
"description": "Bla Bla Bla",
"project": [],
"photo": [
{
"id": 5,
"filename": "1.jpg",
"project_id": null,
"category_id": 1,
"created_at": "2019-09-19 12:52:16",
"updated_at": "2019-09-19 12:52:16"
}
]
},
{},
{}
]
}
My vue.js template is below, but output doesn't show photos based on filename at all, when inspecting on chrome dev tools it shows - src="/img/undefined". It looks like here is some mistake, but I can't find it.
<template>
<div>
<div class="row" v-bind:pagenumber = "pagenumber">
<div class="col-sm-12 col-md-12 col-lg-12" v-for="category in laravelData.data" :key="category.id">
<a :href="'/category/' + category.id">
<div class="projects-thumb" >
<img :src="/img/ + category.photo.filename" class="img-responsive" alt="">
<h3 class="pt-3">{{ category.title }}</h3>
<div class="projects-overlay">
<div class="projects-item">
<p class="mt-4 text-white">{{ category.description }}</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
category: {},
photo: [],
laravelData: {},
id: '',
succmsg: true,
showmodal: false,
pagenumber: 1,
actionmsg: '',
}
},
methods: {
categoryList(page) {
if (typeof page === 'undefined') {
page = 1;
}
this.$http.get('/api/category').then((response) => {
this.laravelData = response.data.photo;
this.pagenumber = page;
});
}
},
mounted() {
this.categoryList();
}
}
</script>
Could someone help me, because I can't find any solution on laravel and vue.js documentation pages.
解决方案
I did some corrections by myself in vue template.
Changed:
<img :src="/img/ + category.photo.filename" class="img-responsive" alt="">
to:
<img :src="/img/ + category.photo[0].filename" class="img-responsive" alt="">
and
axios.get('/api/category').then((response) => {
this.laravelData = response.data.photo;
this.pagenumber = page;
});
to:
axios.get('/api/category').then((response) => {
this.laravelData = response.data;
this.pagenumber = page;
});
So now template output correct image from database, based on JSON data, but it looks like that was only kind of workaround.
Maybe someone could advise the best option based on good practice?
这篇关于Vue.js 获取 Laravel API JSON 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
