子组件注入未定义的变量

Question

我在 Vue.js 的父组件中有一个按钮，当我单击该按钮时，我会更改变量值并将其传递给子组件。现在，当我将变量注入到子组件中时，它会获得未定义的值，但在被监视后会获得其值。

这是父组件：

const selectedReceipt = ref([]);
provide('selectedReceipt', selectedReceipt);

function setSelectedReceipt(receipt){
    selectedReceipt.value = receipt;
}



                                <tr v-for="(receipt,index) in receipts" :key="index">

                                    <td class="align-middle">{{ index + receipts_Data.from }}</td>
                                    <td class="align-middle">{{ receipt.hospitals ? receipt.hospitals.en_name: 'N/A' }}</td>
                                    <td class="align-middle">{{ receipt.years ? receipt.years.en_name : 'N/A' }}</td>
                                    <td class="align-middle">{{ receipt.months ? receipt.months.month_name : 'N/A' }}</td>
                                    <td class="align-middle">{{ receipt.assessment_date }}</td>
                                    <td class="align-middle">{{ receipt.maktoob_no }}</td>
                                    <td class="align-middle">{{ receipt.maktoob_date }}</td>
                                    <td class="align-middle">{{ receipt.description }}</td>
                                    <td class="align-middle">
                                        <div class="btn-list">
                                                                                  
                                            <AppButton
                                                @click="setSelectedReceipt(receipt)"
                                                type="outline-primary" btn-sm
                                                data-bs-toggle="modal"
                                                data-bs-target="#edit_receipts_modal"
                                            ><i
                                                class="fe fe-edit"></i></AppButton>
                                            <BtnOptions
                                                @click="setSelectedReceipt(receipt)"
                                                type="outline-primary" btn-sm

                                            ><li><a @click="openDetailsModal">Details</a></li>
                                                <li><a @click="openStaffModal">Staff</a></li></BtnOptions>
                                        </div>
                                    </td>
                                </tr>
                                

这是子组件：

const selectedReceipt = inject('selectedReceipt');

watch( () => selectedReceipt, async() => {
        console.log(selectedReceipt.value);
        master_Filter.value.hospital_id = selectedReceipt.value.hospitals.en_name;

        master_Filter.value.assessment_date = selectedReceipt.value.assessment_date;
        master_Filter.value.maktoob_no = selectedReceipt.value.maktoob_no;
        master_Filter.value.maktoob_date = selectedReceipt.value.maktoob_date;

        await getDetails();
    },
    {deep: true });




        <template #footer>


            <button type="reset" form="frm-store" class="btn btn-default btnCloseModal" data-bs-dismiss="modal">{{ Lang.get('Close') }}</button>
            

            <AppButton type="btn-primary">
                <a :href="'printDetails/' + selectedReceipt?.value?.id">Print</a>


            </AppButton>
        </template>

问题出在 selectedReceipt 上，当我想将用户重定向到将 selectedRecipt 作为 id 传递的链接时，它显示未定义。

Answer 1

selectedReceipt 是一个 ref ，所以直接使用 selectedReceipt 而不是模板中的 selectedReceipt.value

< a: href = "'printDetails/' + selectedReceipt?.id" > Print < /a>