[Vuejs]-Vue.js how to get data in controller from parent, calculate new variables and show them reactively

by

0👍

You could change your data properties into computed properties, which are automatically updated when any of its dependencies (the incoming props in this case) change:

// InformationBlock.vue
export default {
    props: {/*...*/},

    // 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
    //     }
    // },

    computed: {
        load_body() {
            return this.property_value - this.initial_fee
        },
        income() {
            return Math.round(5 * this.month_pay/3)
        },
        overpayment() {
            return Math.round(this.month_pay * this.credit_term * 12 - this.property_value + this.initial_fee)
        },
        month_pay() {
            let t = this.interest_rate/1200
            return Math.round(this.loan_body*(t + t/(Math.pow((1+t), this.credit_term*12)-1)))
        }
    }
}

Leave a comment