Php 在Laravel中显示从json检索的数据

我是网络开发新手。我在我的项目中使用了Laravel 8和Vue

我有以下代码：

<template>
    <div class="sm:bg-transparent pt-6 md:mt-16 w-full px-4 md:px-0">
        <h1 class="text-dark text-4xl sm:text-3xl font-medium sm:text-center mb-6">{{ __('Archiwum') }}</h1>


        <preloader
            v-if="isLoadingInProgress"
            class="py-8"
            :class="preloaderClass"
        />

        <div class="text-center" v-if="gasmeters.length == 0 && !isLoadingInProgress">
            {{ __('Nie posiadasz jeszcze żadnych odczytów') }}
        </div>

        <div v-if="gasmeters.length">
            <div class="bg-white rounded border border-stroke flex items-start p-6"
                 v-for="(gasmeter, index) in gasmeters"
                 v-bind:key="`gasmeter-${index}`">
                <div class="mr-6">
                    <img class="mb-2" :src="gasmeters.img"/> {{ gasmeters }}
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Lipiec 2020 (#123)</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Stan:</span> <span>2120</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Data:</span> <span>2020.01.12</span>
                </div>
                <div class="w-1/5">
                    <span class="text-xl">Zgłoszone przez aplikację</span>
                </div>
            </div>
        </div>


    </div>
</template>
<script>
import axios from "axios";
import Preloader from "@/common/components/Preloader";

export default {
    components: {
        Preloader
    },
    mounted() {
        this.loadGasmeters();
    },
    data() {
        return {
            gasmeters: [],
            isLoadingInProgress: false,
        }
    },
    computed: {
        preloaderClass() {
            return this.gasmeters.length > 0
                ? ""
                : "loading--transparent loading--block";
        }
    },
    methods: {
        loadGasmeters() {
            this.isLoadingInProgress = true;

            axios
                .get(route('api.archive.list'))
                .then(response => {
                    this.gasmeters = _.get(response, "data.data", []);
                    console.log(this.gasmeters);
                })
                .catch(error => {
                    console.log(error);
                })
                .then(() => {
                    this.isLoadingInProgress = false;
                });
        },

    }
}
</script>

<div v-if="gasmeters.length">
            <div class="bg-white rounded border border-stroke flex items-start p-6"
                 v-for="(gasmeter, index) in gasmeters"
                 v-bind:key="`gasmeter-${index}`">
                <div class="mr-6">
                    <img class="mb-2" :src="gasmeters.img"/> {{ gasmeters }}
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Lipiec 2020 (#123)</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Stan:</span> <span>2120</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Data:</span> <span>2020.01.12</span>
                </div>
                <div class="w-1/5">
                    <span class="text-xl">Zgłoszone przez aplikację</span>
                </div>
            </div>
        </div>

我的零件有问题，此代码：

<template>
    <div class="sm:bg-transparent pt-6 md:mt-16 w-full px-4 md:px-0">
        <h1 class="text-dark text-4xl sm:text-3xl font-medium sm:text-center mb-6">{{ __('Archiwum') }}</h1>


        <preloader
            v-if="isLoadingInProgress"
            class="py-8"
            :class="preloaderClass"
        />

        <div class="text-center" v-if="gasmeters.length == 0 && !isLoadingInProgress">
            {{ __('Nie posiadasz jeszcze żadnych odczytów') }}
        </div>

        <div v-if="gasmeters.length">
            <div class="bg-white rounded border border-stroke flex items-start p-6"
                 v-for="(gasmeter, index) in gasmeters"
                 v-bind:key="`gasmeter-${index}`">
                <div class="mr-6">
                    <img class="mb-2" :src="gasmeters.img"/> {{ gasmeters }}
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Lipiec 2020 (#123)</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Stan:</span> <span>2120</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Data:</span> <span>2020.01.12</span>
                </div>
                <div class="w-1/5">
                    <span class="text-xl">Zgłoszone przez aplikację</span>
                </div>
            </div>
        </div>


    </div>
</template>
<script>
import axios from "axios";
import Preloader from "@/common/components/Preloader";

export default {
    components: {
        Preloader
    },
    mounted() {
        this.loadGasmeters();
    },
    data() {
        return {
            gasmeters: [],
            isLoadingInProgress: false,
        }
    },
    computed: {
        preloaderClass() {
            return this.gasmeters.length > 0
                ? ""
                : "loading--transparent loading--block";
        }
    },
    methods: {
        loadGasmeters() {
            this.isLoadingInProgress = true;

            axios
                .get(route('api.archive.list'))
                .then(response => {
                    this.gasmeters = _.get(response, "data.data", []);
                    console.log(this.gasmeters);
                })
                .catch(error => {
                    console.log(error);
                })
                .then(() => {
                    this.isLoadingInProgress = false;
                });
        },

    }
}
</script>

<div v-if="gasmeters.length">
            <div class="bg-white rounded border border-stroke flex items-start p-6"
                 v-for="(gasmeter, index) in gasmeters"
                 v-bind:key="`gasmeter-${index}`">
                <div class="mr-6">
                    <img class="mb-2" :src="gasmeters.img"/> {{ gasmeters }}
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Lipiec 2020 (#123)</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Stan:</span> <span>2120</span>
                </div>
                <div class="w-1/5">
                    <span class="font-bold text-xl text-grey">Data:</span> <span>2020.01.12</span>
                </div>
                <div class="w-1/5">
                    <span class="text-xl">Zgłoszone przez aplikację</span>
                </div>
            </div>
        </div>

---

请帮帮我，我看到你的问题了。因为来自服务API Laravel的响应数据是数组中的数组。如果您想获得正确的数据，可以通过两种方式：

• 从服务API获取时，您会更改前端数据，如下所示：

• 或者，您可以如下更改Laravel API：

---

我看到了你的问题。因为来自服务API Laravel的响应数据是数组中的数组。如果您想获得正确的数据，可以通过两种方式：

• 从服务API获取时，您会更改前端数据，如下所示：

• 或者，您可以如下更改Laravel API：

---

尝试

{{gasmeter.img}}

它不工作：（然后添加返回json的php代码，您需要修复该侧边

{{gasmeter.img}}}

它不工作：（然后添加返回json的php代码，您需要修复该侧边。）

    axios.get(route('api.archive.list'))
            .then(response => {
                this.gasmeters = _.get(response, "data.data[0]", []);
                console.log(this.gasmeters);
            })
            .catch(error => {
                console.log(error);
            })
            .then(() => {
                this.isLoadingInProgress = false;
            });

    {
        "data": [{
                    "id": 1,
                    "value": "99.00",
                    "settlement_date": "2020-10-20T22:00:00.000000Z",
                    "loaded_from": "Stan pobrany z systemu BAŁTYKGAZ",
                    "img": "img/icons/crm.svg",
                    "created_at": "2020-10-21T15:09:22.000000Z"
                },
                {
                    "id": 2,
                    "value": "109.00",
                    "settlement_date": "2020-10-20T22:00:00.000000Z",
                    "loaded_from": "Zgłoszone przez aplikację",
                    "img": "img/icons/cms.svg",
                    "created_at": "2020-10-21T17:02:18.000000Z"
                }
            ]
    }