I am encountering an issue while attempting to call the child method from the parent component in vue3 using the ref method. Unfortunately, an error is being thrown.
Uncaught TypeError: addNewPaper.value?.savePaper is not a function
Displayed below is my code. I would be grateful for any guidance on where I might have made a mistake.
Child component
<script setup lang="ts">
import { useWindowScroll } from '@vueuse/core'
import { Notyf } from 'notyf'
import { computed, defineProps, reactive, ref } from 'vue'
import { papers } from '/@src/firebase/connections'
const companySize = ref('')
const businessType = ref('')
const productToDemo = ref('')
const date = ref(new Date())
const { y } = useWindowScroll()
const isStuck = computed(() => {
return y.value > 30
})
const initialState = reactive({
subject: '',
paper: '',
marks: '',
})
const notyf = new Notyf()
const props = defineProps({
subjects: { required: true },
})
const savePaper = () => {
papers
.add(initialState)
.then(() => {
notyf.success('Paper saved successfully')
})
.catch((err) => {
notyf.error('Something went wrong')
})
}
</script>
Parent component
const addNewPaper = ref()
const successSave = () => {
addNewPaper.value?.savePaper()
notyf.success('Your paper has been successfully created!')
}
<template #content>
<FormAddNewTopical ref="addNewPaper" :subjects="_subjects"></FormAddNewTopical>
</template>
Any assistance would be highly appreciated!