CODEWITHSUNDEEP
vue.jsvuejs3
Joel G Mathew
Joel G Mathew

Reputation: 8061

Bound data passed as props to subcomponent does not update after promise

I have a component, which loads other components in its template. I have bound a variable checkinRecord to a prop on the sub component. When the app loads, subcomponent is displayed without data, as is expected. But the main component in its created hook, calls a method which fetched data as an object from an API,which on fulfilment of the promise updates checkinRecord. Since this is bound to the subcomponent's prop, I expect the mounted hook to reupdate printing the new value. But checkinRecord in the subcomponent does not change. What am I missing? I cannot use Vuex here, as the data involved is a big collection of clinical data of patients.

Main component - EMR.vue:

<template>
<div>
    <clinical-block :checkinRecord="checkinRecord"></clinical-block>
</div>
</template>

<script>
import ClinicalBlock from "@/views/emr/ClinicalBlock.vue";
export default {
data() {
    return {
        checkinRecord: {},
            };
},
components: {
    "clinical-block": ClinicalBlock,
},
created() {
    this.getCheckinRecord()
},
methods: {
    getCheckinRecord() {
    Service.GetCheckinRecord(checkinID, token)
        .then((response) => {
        if (response.hospitalid == undefined) {
            this.checkinRecord = response[0]
            console.log(`Checkin record is now`);
            console.log(this.checkinRecord);
        }

        })
        .catch((error) => {
        console.log(
            `getCheckinRecord::Error occured in getCheckinRecord`
        );
        console.log(error);
        });
    },
}
}
</script>

Sub component: ClinicalBlock.vue:

<script>
export default {
props: ["checkinRecord"],
    mounted () {
    console.log(`In mounted of clinicalBlock, received checkinRecord:`);
    console.log(this.checkinRecord);
},
};
</script>

Console Output:

In Service::GetCheckinRecord

In mounted of clinicalBlock, received checkinRecord:
Proxy[[Handler]]: Object[[Target]]: Object__proto__: Object[[IsRevoked]]: false

Got data from API_GET_CHECKIN_RECORD is
[
    {
        "clinicalid": 3580,
        "checkinid": {
        ....snipped....
        },
        "linkedcustomer": {
            ....snipped....
        },
        "diagnosis": "['Allergic rhinitis', 'Gastro-oesophageal reflux disease']",
        "ICDCode": "['CA08.0', 'DA22']",
        "ICDVer": "",
        "history": "Patient partly better. Has headache. No secretions.",
        "examination": "Nose: DNS to right. Throat Clear",
        "investigation": "",
        "referral": "\"\"",
        "advise": "<p>\n</p>",
        "followup": "16-07-21",
        "diagnosis_as_list": [
            "Allergic rhinitis",
            "Gastro-oesophageal reflux disease"
        ],
        "icd_as_list": [
            "CA08.0",
            "DA22"
        ]
    }
]

Checkin record is now

[
    {
        "clinicalid": 3580,
        "checkinid": {
        ....snipped....
        },
        "linkedcustomer": {
            ....snipped....
        },
        "diagnosis": "['Allergic rhinitis', 'Gastro-oesophageal reflux disease']",
        "ICDCode": "['CA08.0', 'DA22']",
        "ICDVer": "",
        "history": "Patient partly better. Has headache. No secretions.",
        "examination": "Nose: DNS to right. Throat Clear",
        "investigation": "",
        "referral": "\"\"",
        "advise": "<p>\n</p>",
        "followup": "16-07-21",
        "diagnosis_as_list": [
            "Allergic rhinitis",
            "Gastro-oesophageal reflux disease"
        ],
        "icd_as_list": [
            "CA08.0",
            "DA22"
        ]
    }
]

This means that after the API runs, the main component gets the data, but subcomponent does not get the bound data. How do I fix this?

Upvotes: 0

Views: 41

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

In reality the sub component is getting the data but in asynchronous way, and mounted hook runs once and this doesn't guarantee getting the data from the parent , instead of using mounted try to use a watcher property like :

<script>
export default {
props: ["checkinRecord"],
watch:{
    checkinRecord:{
     handler(newVal){
         console.log(newVal)
     },
       immediate:true,
       deep:true
    
    }
  }
};
</script>

Upvotes: 2

Related Questions