显示从 Laravel 中的 json 检索到的数据
Displaying data retrieved from json in Laravel
我是初级网络开发人员。我在我的项目中使用 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>
我的phpreturn我:
{
"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"
}
]
]
}
我的代码有问题:
<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>
我想用 json 中的 img 替换我的 img,“Lipiec 2020 (#123)” => gasmeters.settlement_date (# gasmeters.id),“Stan:” 2120 =>斯坦:gasmeters.value
我怎样才能做到?
这个:{{煤气表}}return我:
[ [ { "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" } ] ]
请帮帮我
我看到你的问题了。因为你来自服务 API Laravel 的响应数据是数组中的数组。如果您想获得正确的数据,您可以通过两种方式进行:
- 从服务 API 获取时更改前端数据,如下所示:
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;
});
- 或者您可以像这样更改 Laravel API:
{
"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"
}
]
}
我是初级网络开发人员。我在我的项目中使用 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>
我的phpreturn我:
{
"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"
}
]
]
}
我的代码有问题:
<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>
我想用 json 中的 img 替换我的 img,“Lipiec 2020 (#123)” => gasmeters.settlement_date (# gasmeters.id),“Stan:” 2120 =>斯坦:gasmeters.value
我怎样才能做到?
这个:{{煤气表}}return我:
[ [ { "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" } ] ]
请帮帮我
我看到你的问题了。因为你来自服务 API Laravel 的响应数据是数组中的数组。如果您想获得正确的数据,您可以通过两种方式进行:
- 从服务 API 获取时更改前端数据,如下所示:
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;
});
- 或者您可以像这样更改 Laravel API:
{
"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"
}
]
}