Vue.js获取Laravel API JSON数据 [英] Vue.js fetching Laravel API JSON data

问题描述

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

我的vue.js模板在下面，但是输出完全不显示基于文件名的照片，在chrome开发工具上检查时，它显示-src ="/img/未定义".看来这是一个错误，但我找不到它.

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>

有人可以帮助我，因为我在laravel和vue.js文档页面上找不到任何解决方案.

Could someone help me, because I can't find any solution on laravel and vue.js documentation pages.

推荐答案

我自己在vue模板中进行了一些更正. 已更改:

I did some corrections by myself in vue template. Changed:

<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数据从数据库中输出正确的图像，但这似乎只是一种解决方法. 也许有人可以根据良好的做法建议最佳的选择?

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