Soy nuevo en vuejs y no tengo mucha experiencia en JavaScript. Yo uso Vue3 en Laravel
Tengo un componente secundario que expone una referencia en una entrada como esta
<input v-model="raw_input" ref="raw" @input="checkLength(limit)" @keydown="enterNumbers($event)" type="number" /> const raw = ref(''); defineExpose({ raw })en el padre
<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>En la parte inferior del script hay 3 líneas (solo descomento una a la vez) La primera muestra esto en la plantilla
{ "raw": "[object HTMLInputElement]" }El segundo no muestra nada.
Y el tercero reporta un error.
No capturado (en promesa) TypeError: svi.raw no está definido
Necesito ayuda para obtener el valor de la entrada a la que se hace referencia en el componente secundario.
¿Necesita la referencia del elemento? O solo el valor?
Si no, simplemente exponga el valor de esta manera: Ejemplo en vivo
// App.vue <script setup> import { ref } from 'vue' import SmartVolumeInputVue from './SmartVolumeInput.vue' const svi = ref() </script> <template> <SmartVolumeInputVue ref="svi" /> <div> {{svi?.raw_input}} </div> </template> // SmartVolumeInput.vue <script setup> import { ref, defineExpose } from 'vue' const raw_input = ref(123) defineExpose({ raw_input }) </script> <template> <input v-model.number="raw_input" type="number" /> </template>