As a beginner to vuejs with limited JavaScript experience, I am using Vue3 in Laravel.
I have a child component that exposes a ref on an input field like so:
<input
v-model="raw_input"
ref="raw"
@input="checkLength(limit)"
@keydown="enterNumbers($event)"
type="number"
/>
const raw = ref('');
defineExpose({
raw
})
In the parent component:
<template lang="">
<PageComponent title="Dashboard">
<SmartVolumeInputVue ref="svi" />
<div class="mt-16 border h-8">
{{ val }}
</div>
</PageComponent>
</template>
<script setup>
import PageComponent from "../components/PageComponent.vue"
import SmartVolumeInputVue from "../components/customInputs/SmartVolumeInput.vue";import { computed, ref } from "vue";
const svi = ref(null)
//let val=svi
//let val=svi.raw
let val=svi.raw.value
</script>
In the script, there are 3 lines at the bottom, one of which is uncommented at a time: The first line displays this in the template:
{ "raw": "[object HTMLInputElement]" }
The second line displays nothing.
And the third line results in an error:
Uncaught (in promise) TypeError: svi.raw is undefined
I am seeking assistance in retrieving the value of the referenced input in the child component.