Vue.js 获取 Laravel API JSON 数据答案

【问题标题】：Vue.js fetching Laravel API JSON dataVue.js 获取 Laravel API JSON 数据
【发布时间】：2020-01-21 12:43:09
【问题描述】：

我正在制作一个基于 Laravel 和 Vue.js 的应用程序。在主页上我尝试输出带有照片的项目类别，它只需要类别标题和描述，但是我从 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"
                }
            ]
        },
        {},
        {}
    ]
}

我的 vue.js 模板如下，但输出根本不显示基于文件名的照片，在检查 chrome 开发工具时它显示 - src="/img/undefined"。好像这里有错误，但我找不到。

<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>

谁能帮助我，因为我在 laravel 和 vue.js 文档页面上找不到任何解决方案。

【问题讨论】：

尝试在模板中打印 {{ category }} 对象并检查属性是否正常

标签： php json laravel api vue.js

【解决方案1】：

请替换此行

this.laravelData = response.data.photo;

通过这条线

this.laravelData = response.data[0].photo;

或

this.laravelData = response.data.data[0].photo;

然后尝试。

【讨论】：

谢谢，我做到了。但没有成功。出现错误：渲染错误：“TypeError：无法读取未定义的属性‘数据’”
this.laravelData = response.data[0].photo;得到错误：未捕获（承诺）类型错误：无法读取未定义的属性“照片”
this.laravelData = response.data.data[0].photo;没有显示错误，但它根本没有输出任何东西，我的意思是 category.description 和 category.title

【解决方案2】：

我自己在 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 = page;
                });

到：

 axios.get('/api/category').then((response) => {
                    this.laravelData = response.data;
                    this.pagenumber = page;
                });

所以现在模板根据 JSON 数据从数据库输出正确的图像，但看起来这只是一种解决方法。也许有人可以根据良好做法提出最佳选择？

【讨论】：