The code sample is for Vue3 composition API to handle a signup form. The intention is to disable the button after it's pressed until the singin code(omitted) gets called only once.
Why is submitButton.value used vs. just the submitButton?
setup() {
const submitButton = ref<HTMLButtonElement | null>(null);
//Form submit function
const onSubmitLogin = (values) => {
//Disable button
/* eslint-disable @typescript-eslint/no-non-null-assertion */
submitButton.value!.disabled = true;
}
submitButton is a ref which is an object with a single property named value that has the actual element.
So this:
submitButton.disabled = true
Is a type error because the ref has no property named disabled.
Where this:
submitButton.value!.disabled = true;
Gets the value of the ref (an HTMLButtonElement) and sets the disabled property of that button.
Read more about refs in the docs: https://vuejs.org/api/reactivity-core.html#ref
Lastly, you can avoid having to silence that warning with something like:
submitButton.value && (submitButton.value.disabled = true)
here you only assign the property if the value exists.