Difference between 'button.disabled = true' and 'button.value.disabled = true'?-CodePudding

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; 
}

CodePudding user response：

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.