Child component injecting undefined variable

Question

I have a button in parent component in Vue.js, when I click the button I change a variables value and pass it to the child component. Now when I inject the variable inside my child component it gets the value of undefined but gets its value after being watched.

This is Parent component:

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>
                                

This is child component:

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>

The problem is with selectedReceipt, and when I want to redirect a user to a link passing selectedRecipt as an id, it says undefined.

Answer 1

selectedReceipt is a ref ,so direct using selectedReceipt instead of selectedReceipt.value in template

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