时间戳

首页 > 解决方案 > 作为道具传递给子组件的绑定数据在承诺后不会更新

vue.js - 作为道具传递给子组件的绑定数据在承诺后不会更新

问题描述

我有一个组件，它在其模板中加载其他组件。我已将变量 checkinRecord 绑定到子组件上的道具。当应用程序加载时，子组件显示没有数据，正如预期的那样。但是在其 created 钩子中的主要组件调用了一个方法，该方法从 API 获取数据作为对象，在履行承诺时更新 checkinRecord。由于这绑定到子组件的道具，我希望安装的钩子重新更新打印新值。但是子组件中的 checkinRecord 并没有改变。我错过了什么？我不能在这里使用 Vuex，因为所涉及的数据是患者临床数据的大量集合。

主要组件 - 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>

子组件：ClinicalBlock.vue：

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

控制台输出：

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"
        ]
    }
]

这意味着API运行后，主组件获取数据，而子组件获取不到绑定的数据。我该如何解决？

标签： vue.jsvuejs3

解决方案

实际上，子组件正在以异步方式获取数据，并且挂载的钩子运行一次，这并不能保证从父组件获取数据，而不是使用挂载尝试使用观察者属性，例如：

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

推荐阅读