Vue3 TS get value of input with ref

Question

Seems to be so simple problem, however, I don't see any consistent documentation of Vue 3 typescript on how to access an input field and get its value from 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,
  }
});

PS. very new with Vue and typescript. go easy on me:)

Answer 1

I think you just can use the v-model binding .

<template>
  <Field
    type="text"
    name="test"
    v-model="input"
  />
</template>

If you need to run a function on change, you could use watch() . Remember to import watch from 'vue'.

watch(input, (newValue, oldValue)=>{
   console.log(newValue, oldValue)
})

Hope this helps.

PS: a bit off topic (but since you are fairly new to vue): you also can use <script setup> , which simplifies the setup function. See docs.