Having a type error when trying to pass data from the Pinia store to a child component's input field using TypeScript -
Error message: 'Property 'storeForm' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => ...'.
Questioning if typing the store or other properties is necessary?
// Child component
<template>
<v-sheet width="300" class="mx-auto">
<v-form fast-fail @submit.prevent>
<!-- v-model="firstName" -->
<v-text-field
label="First name"
:rules="firstNameRules"
placeholder="Your Name"
>{{ storeForm.firstName }}</v-text-field> // encountering error here
<!-- v-model="lastName" -->
<v-text-field
label="Last name"
:rules="lastNameRules"
>{{ storeForm.lastName }}</v-text-field>
<v-btn type="submit" block class="mt-2" @click="submit($event)">Submit</v-btn>
</v-form>
</v-sheet>
</template>
<script lang="ts">
import { ref } from 'vue'
import {useForm} from '@/stores/form'
import router from '../router'
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const storeForm = useForm();
const firstName = ref<string>('')
const lastName = ref<string>('')
const firstNameRules = ref<any>(
(value: String) => {
if (value?.length > 3) return true
return 'First name must be at least 3 characters.'
}
)
const lastNameRules = ref<any>(
(value: String) => {
if (/[^0-9]/.test(String(value))) return true
return 'Last name can not contain digits.'
}
)
const submit = (event: Event) => {
event.preventDefault();
let user = {
firstName: firstName.value,
lastName: lastName.value,
}
storeForm.login(user)
router.push('/');
firstName.value = '';
lastName.value = '';
}
return {firstName, lastName, firstNameRules, lastNameRules, submit};
}
})
</script>
// Store file
import { defineStore } from 'pinia'
export const useForm = defineStore('login',{
state: () => ({
firstName: <string>'',
lastName: <string>''
}),
getters: {
},
actions: {
login(data: any) {
this.firstName = data.firstName
this.lastName = data.lastName
}
}
})