El ejemplo de código es para que la API de composición de Vue3 maneje un formulario de registro. La intención es deshabilitar el botón después de presionarlo hasta que el código de canto (omitido) se llame solo una vez.
¿Por qué se usa submitButton.value en lugar de solo el botón de 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 es una ref que es un objeto con una sola propiedad denominada value que tiene el elemento real.
Así que esto:
submitButton.disabled = true Es un error de tipo porque la referencia no tiene una propiedad denominada disabled .
Donde esto:
submitButton.value!.disabled = true; Obtiene el valor de la referencia (un HTMLButtonElement ) y establece la propiedad disabled de ese botón.
Lea más sobre referencias en los documentos: https://vuejs.org/api/reactividad-core.html#ref
Por último, puede evitar tener que silenciar esa advertencia con algo como:
submitButton.value && (submitButton.value.disabled = true)aquí solo asignas la propiedad si el valor existe.