Как перенести реквизит от родителя к внуку vue.js - PullRequest
0 голосов
/ 04 июля 2019

У меня есть 3 компонента.Profile.vue - родитель, Information.vue - ребенок и Rempayment.vue - внук.В Profile.vue я передаю данные из API и передаю их родителю.Тогда мне нужно то же самое для внука (rempayment.vue).

это profile.vue:

<template>
<div>
<Nav />
<div v-if="repaid">
  <Repaid />
</div>
<div v-else>
  <Information :loan="detailsLoan" />
  <Timetable :loan="detailsLoan" :confirmed="confirmed" v-if="confirmed 
 >0" />
  <TimetableApplication :loan="loan" v-else-if="confirmed == 0" />
  <Documents :loan="detailsLoan" />
</div>
</div>
</template>

<script>
import co from "@/util/co.js";
import Nav from "@/scenes/ClientZone/components/Nav.vue";
import Information from "@/scenes/ClientZone/components/Information.vue";
import Timetable from "@/scenes/ClientZone/components/Timetable.vue";
import TimetableApplication from 
"@/scenes/ClientZone/components/TimetableApplication.vue";
import Documents from "@/scenes/ClientZone/components/Documents.vue";
export default {
components: {
Nav,
Information,
Timetable,
TimetableApplication,
Documents
},
methods: {},
data: function() {
return {
  loan: {},
  repaid: false,
  detailsLoan: { data: {}, schedule: {}, sum: {} },
  confirmed: 0
};
},
mounted() {
// all informations about loan
co.getLoanList(
  this.$store.getters.customer_id,
  this.$store.getters.token
).then(data => {
  if (data.status > 400) {
    this.$router.push({ name: "login" });
  } else {
    let _data = data.data;
    console.log(_data);
    this.loan = Object.values(_data).map(loan => {
      if (loan.confirmed == 0) {
        return loan;
      } else if (loan.debt > 0) {
        this.confirmed = loan.confirmed;
        return loan;
      } else if (loan.debt == 0) {
        this.repaid = true;
        return loan;
      }
    })[0];
  }
});

my 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="detailsLoan")
  </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 }
 }
};

Мой rempayment.vue - внук

<template lang="pug">
.main_repayement
    .container
      .box_1(:style="veryfi")
        .box
          .pic
          .main_box
            .info 
              a Trwa weryfikacja wniosku
      .box_2(:style="delay")
        .box
          .pic
          .main_box
              .info
                  a Aktualnie do spłaty
              .amount 
                  a {{loan.l_amount}} PLN
          .details
              .loan
                  a Rata: 
                  a(v-for="loan in loan.schedule") {{loan.amount}}
              .interest
                  a Interesse por atraso: 
                  a R$ {{late_fee}}
          button(type="button" @click="change") Pago
      .box_3(:style="activeLoan")
        .box
          .pic
          .main_box
            .info 
              a Pożyczka aktywna
            .info_txt
              a Termin płatności raty upływa
              a {{showDate}}
 </template>

 <script>
 import co from "@/util/co.js";
  export default {
    name: "Repayment",
    data() {
    return {
    objectNone: {
    display: "none"
    },
    objectBlock: {
    display: "block"
    },
    red: "blue"
  };
  },
 props: {
  loan: { type: Object, required: true }
 },

Поэтому я попытался передать реквизитный кредит от информации к возмещению, но все равно это неправильно.Может кто-нибудь привести меня к решению.

Ответы [ 2 ]

0 голосов
/ 04 июля 2019

Вам нужно внести небольшие изменения, в файле information.vue вам нужно написать : loan = "loan" not: loan = "detailsLoan".Надеюсь, что это работает.

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 голосов
/ 04 июля 2019

Мы можем использовать одно из этих решений:

  1. Обеспечить / впрыснуть
  2. Vuex Store для обмена данными между компонентами

ПРИМЕЧАНИЕ: Привязка ввода / ввода НЕ является реактивной. Но если наблюдаемые объекты предоставляются, они остаются реактивными. Читать дальше

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...