Vue.js 获取 Laravel API JSON 数据

Posted 2023-02-22

【中文标题】Vue.js 获取 Laravel API JSON 数据

【英文标题】：Vue.js fetching Laravel API JSON data

【发布时间】：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" >
                            <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 对象并检查属性是否正常

【参考方案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" >

到：

<img :src="/img/ + category.photo[0].filename" class="img-responsive" >

和

 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 数据从数据库输出正确的图像，但看起来这只是一种解决方法。 也许有人可以根据良好做法提出最佳选择？