It appears to be a straightforward issue, but I haven't been able to find consistent Vue 3 TypeScript documentation on accessing an input field and retrieving its value from within a function.
<template>
<Field
type="text"
name="test"
ref="input"
/>
<span @click="testFunc()">Test</span>
</template>
export default defineComponent({
...
setup() {
const input = ref<HTMLInputElement | null>(null);
const testFunc = () => {
if (input.value) {
console.log(input.value.value); // always undefined
}
};
return {
input,
testFunc,
}
});
Note: I'm very new to Vue and TypeScript, so please be patient with me :)