我有像下面這樣的 JSON，在付款中 .. 我也無法獲得 cash_paymentpaid_amount或 installment_paymentpaid_amount和日期
{
"response": [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "dokj",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},}
代碼如下：
<template>
<div>
<!-- Header -->
<div class="header bg-gradient-success py-7 py-lg-8 pt-lg-9">
<b-container>
<div class="header-body text-center mb-7">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-5">
</b-col>
</b-row>
</div>
</b-container>
</div>
<!-- Page content -->
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" v-if="roles ==='Admin'">
<div class="text-center text-muted mb-4">
</div>
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option value="duhok" >doki</option>
>
</select>
<div v-if="City=='duhok'" v-for="(flat,index) in Flats" :key="index" v-show="flat.city=='doki'">
{{flat.city}} // i can get city easily
<pre style="color:white;" v-for="(find,indexT) in flat" :key="indexT"> {{find.paid_amount}} </pre> //didn't work
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import BuildingsService from "../../../services/ApiService"
export default {
name: 'light-table',
components: {
},
data() {
return {
buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
};
},
computed: {
roles() {
let roles = JSON.parse(sessionStorage.getItem('user')).role;
return roles;
},
},
mounted: function () {
BuildingsService.getAllFlats().then((response) => {
this.Flats = response.data.response;
});
BuildingsService.getBuildings().then((response) => {
this.Building = response.data.response;
console.log(this.Building, "buildings");
});
},
}
</script>uj5u.com熱心網友回復：
find.payment.cash_payment.paid_amount
find.payment.installment_payment.installments[0].paid_amount
find.payment.installment_payment.installments[1].paid_amount
您將需要一種方法來檢測付款方式，如果它是一個陣列，還需要對分期付款求和。
未測驗示例
getPaidAmount(flat) {
if (flat.payment.cash_payment){ return Number(payment.cash_payment.paid_amount) }
if (flat.payment.installment_payment){
const arr = flat.payment.installment_payment.installments.map(it=>Number(it.paid_amount))
const sum = arr.reduce(function (a, b) {return a b;}, 0);
return sum
}
}
uj5u.com熱心網友回復：
您可以嘗試如下代碼片段：
new Vue({
el: '#demo',
data() {
return {
response: [
{
"status": "sold",
"price": "100000",
"currency": "USD",
"_id": "61c21fa6f650480b7630badf",
"flat_number": 1,
"description": "This is a newly created flat.",
"city": "doki",
"payment": {
"cash_payment": {
"paid_amount": "100000",
"date": "2021-12-23"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.200Z",
"updatedAt": "2021-12-23T18:42:43.959Z",
"__v": 0
},
{
"status": "sold",
"price": "Not set",
"currency": "USD",
"_id": "61c21fa6f650480b7630bae0",
"flat_number": 2,
"description": "This is a newly created flat.",
"city": "Istanbul",
"payment": {
"installment_payment": {
"installments": [
{
"paid_amount": "5000",
"date": "2021-12-21"
},
{
"paid_amount": "4000",
"date": "2021-12-21"
}
],
"remaining": "1000"
}
},
"floor": "61c21fa6f650480b7630bade",
"building": "61c21fa6f650480b7630badd",
"createdAt": "2021-12-21T18:40:44.202Z",
"updatedAt": "2021-12-22T23:06:26.602Z",
"__v": 0
},
],
//buildingId: this.$route.params.id,
Flats: [],
City:"",
Floors: [],
check: true,
Building: [],
obj:[],
paymentObj:""
}
},
computed: {
roles() {
//let roles = JSON.parse(sessionStorage.getItem('user')).role;
//return roles;
},
cities() {
return this.response.map(r => r.city)
}
},
mounted: function () {
//BuildingsService.getAllFlats().then((response) => {
this.Flats = this.response;
//});
//BuildingsService.getBuildings().then((response) => {
this.Building = this.response;
//console.log(this.Building, "buildings");
//});
},
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
<b-container class="page-contet mt--8 pb-5">
<b-row class="justify-content-center">
<b-col lg="7" md="10">
<b-card no-body class="bg-white border-0 mb-0" style="background: linear-gradient(87deg, #172b4d 0, #1d2026 100%) !important ;">
<b-card-header class="bg-transparent pb-5">
<div class="text-muted text-center mt-2 mb-3">
<h2> details </h2>
</div>
</b-card-header>
<b-card-body class="px-lg-5 py-lg-5" >
<validation-observer ref="formValidator">
<b-form role="form">
<select class="status-info" v-model="City">
<option value="" selected disabled> choose city </option>
<option v-for="city in cities" >{{ city }}</option>
</select>
<div v-for="(flat,index) in Flats" :key="index" style="color:white;" v-show="City">
<div v-if="flat.payment.cash_payment && flat.city === City">
{{ flat.city }}
<pre style="color:white;" v-for="(find,indexT) in flat.payment" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
<div v-else v-if="flat.payment.installment_payment && flat.city === City">
{{ flat.city }}
<pre v-for="(find,indexT) in flat.payment.installment_payment?.installments" :key="indexT">
<span>Amount: {{ find.paid_amount }}</span> / <span>Date: {{ find.date }}</span>
</pre>
</div>
</div>
</b-form>
</validation-observer>
</b-card-body>
</b-card>
</b-col>
</b-row>
</b-container>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395513.html
標籤：javascript Vue.js
上一篇：定義要在組件內部使用的全域變數