LoginInfo.vue
<script setup lang="ts">
import { rules } from './config/AccountConfig'
import { reactive } from 'vue'
import { ref } from 'vue';
import { ElForm } from 'element-plus';
const info = reactive({
username: '',
email: ''
})
const formRef = ref<InstanceType<typeof ElForm>>()
const getInfoAction = () => {
console.log("Fetching user info")
formRef.value?.validate((valid) => {
if (valid) {
console.log("Data fetched successfully")
}
})
}
// Rules
</script>
LoginSection
<script setup lang="ts">
import LoginInfo from './LoginInfo.vue'
import LogSupport from './LogSupport.vue'
import { ref } from 'vue'
const isRememberedUser = ref(false);
const infoRef = ref<InstanceType<typeof LoginInfo>>()
const handleGetInfoClick = () => {
console.log("Getting user information")
infoRef.value?.getInfoAction() // No property named "getInfoAction"
}
</script>
error How can I properly type the imported component, so that when calling its methods through refs, it validates exposed method names and argument types?
infoRef.value?.getInfoAction() No property named "getInfoAction"
Any suggestions on how to resolve this issue?