[Vuejs]-How to transfer props from parent to grandchild vue.js

-1👍

You need to make small change, in information.vue you need to write :loan=”loan” not :loan=”detailsLoan”. Hope it works.

information.vue:

<template lang="pug">
  .main_box
  .main
    .container.flex
        .box
            .loan_info
                .info
                    a Loan ID
                    a Product
                    a Amount
                .details
                    a {{loan.data.id}}
                    a Crédito de {{loan.data.period / 30}} meses
                    a R$ {{loan.data.amount}}
            .loan_status
                .status
                    a Status: 
                .txt
                    a {{status}}
        Repayment(:loan="loan")
  </template>

  <script>
  import Repayment from "@/scenes/ClientZone/components/Repayment.vue";
 import co from "@/util/co.js";

 export default {
  name: "Information",
  components: {
 Repayment
  },
  data() {
 return {
  detailsLoan: { data: {}, schedule: {}, sum: {} }
 };
 },
computed: {
 status() {
   if (this.loan.data.delay > 0) {
    return "O pagamento do montante do empréstimo está atrasado"; 
 //Płatność kwoty pożyczki jest opóźniona
  }
  if (this.loan.data.debt > 0) {
    return "pożyczka jest aktywna";
  }
  if (this.loan.data.debt == 0) {
    return "pożyczka zatwierdzona";
  }
}
},
props: {
  loan: { type: Object, required: true }
 }
};

0👍

We can use one of those solutions:

  1. Provide/inject
  2. Vuex Store for sharing data between components

NOTE: The provide/inject binding are NOT reactive. But if observed objects are provided, they do remain reactive. Read more

Leave a comment