I thought referencing an input box to get a single value via Vue.js 3 would be simple, but can't seem to get this working. When I type something and click on search, I expect to see a value from the input box. Instead, all I get is object HtmlInputElement. Any idea?
Vue JS 3 Composition
const searchValue = ref(null);
const loadSpinner = ref(null)
const dividendItems = ref(null)
const router = useRouter()
function routerPush(routerLink){
alert(searchValue.value)
let url = routerLink + searchValue.value
}
Template
<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing" maxlength="10" id="searchValue" name="searchValue" ref="searchValue" placeholder="enter something">
By using searchValue.value, you are accessing the value inside the searchValue ref, which gives you the HTMLInputElement. To get the input's value you will have to use searchValue.value.value.
alert(seachValue.value.value)
See Ref
Refs in vue3 can be a bit confusing, by using ref(value: T) you wrap a value into Ref<T>, so if you want to access it in your script, you need to use refValue.value.
By adding ref="searchValue" to your input, the ref's value is set to this input, and thefore the ref is Ref<HTMLInputElement>.
tl;dr
searchValue isn't HTMLInputElement but Ref<HTMLInputElement>.
By using searchValue.value you get the HTMLInputElement, and by using searchValue.value.value you get the HTMLInputElement's value
Instead of using ref="" on you input, and getting the input's value, you can two-way bind a string to the input, and read the Ref<String> value instead.
It again sounds a bit scary, but the example speaks for itself.
<script setup>
const searchValue = ref("")
function routerPush(routerLink){
alert(searchValue.value)
}
</script>
<template>
<input v-model="searchValue" />
</template
In the example I created a ref with value of empty string, and thanks to v-model, it's value will be changed everytime the input's value is changed, so this time searchValue.value works. (The string is still wrapped in Ref because of reactivity, so to get the string from inside the Ref, you use the .value)
I've recently learned about @vue/reactivity-transform, which adds compiler macros, that add the .value for you at compilation time.
By using reactivity transform, you could use the code you have posted in your question. (ref() would need to be replaced with $ref())