https://i.sstatic.net/h6uDD.png
I am working on two components: CreditForm.vue and InformationBlock.vue
<template>
<form class="parent">
<div>
<div class="form-group">
<label for="property_value">property_value</label>
<input type="number" class="form-control" id="property_value" v-model.number="property_value">
</div>
<div class="form-group">
<label for="initial_fee">initial_fee</label>
<input type="number" class="form-control" id="initial_fee"
v-model.number="initial_fee">
</div>
<div class="form-group">
<label for="credit_term">credit_term</label>
<input type="number" class="form-control" id="credit_term"
v-model.number="credit_term">
</div>
<div class="form-group">
<label for="interest_rate">interest_rate</label>
<input type="number" class="form-control" id="interest_rate"
v-model.number="interest_rate">
</div>
<div class="d-inline-flex">
<b-button @click="save">Save</b-button>
<b-button @click="clear">Clear</b-button>
</div>
</div>
<information-block :property_value="property_value"
:initial_fee="initial_fee"
:credit_term="credit_term"
:interest_rate="interest_rate"/>
</form>
</template>
<script>
import InformationBlock from "@/components/InformationBlock";
export default {
name: "CreditForm",
components: {InformationBlock},
data() {
return {
property_value: 0,
initial_fee: 0,
credit_term: 0,
interest_rate: 0
}
},
methods: {
save: function () {
},
clear: function () {
this.property_value = 0
this.initial_fee = 0
this.credit_term = 0
this.interest_rate = 0
}
}
}
</script>
Another component includes:
<template>
<div>
{{property_value}}
{{initial_fee}}
{{credit_term}}
{{interest_rate}}
<table class="inner table table-borderless">
<tr>
<td>
<div>
<h5>month_pay</h5>
<h1>{{month_pay}}</h1>
</div>
</td>
<td>
<div>
<h5>income</h5>
<h1>{{income}}</h1>
</div>
</td>
</tr>
<tr>
<td>
<div>
<h5>overpayment</h5>
<h1>{{overpayment}}</h1>
</div>
</td>
<td>
<div>
<h5>loan_body</h5>
<h1>{{loan_body}}</h1>
</div>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "InformationBlock",
props: {
property_value: {
required: true,
},
initial_fee: {
required: true,
},
credit_term: {
required: true,
},
interest_rate: {
required: true,
}
},
data: function () {
let loan_body = this.property_value-this.initial_fee
let t = this.interest_rate/1200
let month_pay = Math.round(loan_body*(t + t/(Math.pow((1+t), this.credit_term*12)-1)))
let income = Math.round(5 * month_pay/3)
let overpayment = Math.round(month_pay*this.credit_term*12-this.property_value+this.initial_fee)
return {
loan_body,
income,
overpayment,
month_pay
}
}
}
</script>
In the child component, I aim to retrieve 4 variables from the parent, perform calculations, and display new variables reactively as each input changes. However, something seems off in my implementation of this feature. Can anyone offer some guidance or assistance?