Quiero deshabilitar el botón de envío de mi formulario hasta que se completen todos los campos de entrada y no haya errores.
<button :disabled="disabled" type="submit" value="Submit" > Suggest </button> let disabled = ref(true); let error = ref(false); nextTick(() => { let inputs = Array.from(document.getElementsByClassName("form__input")); if (!error.value) { inputs.forEach((input) => { if (input.value === "") { disabled.value = true; } else { disabled.value = false; } }); } })El botón está deshabilitado de forma predeterminada, pero no se 'habilitará' solo una vez que se cumplan las condiciones ya mencionadas.
Hasta ahora, estoy usando un gancho auxiliar de ciclo de vida nextTick() que claramente no me ayuda en esta situación.
El estado 'deshabilitado' se actualizará en la consola pero no en el DOM.
¿Cómo puedo abordar esto?
Salud
La solución más fácil es usar un valor computed para establecer el estado deshabilitado del botón, en función de los valores de entrada, si alguno está vacío, el botón está deshabilitado.
Aquí hay un ejemplo básico
const { ref, createApp, computed } = Vue; createApp({ setup() { const input1 = ref(""); const input2 = ref(""); const input3 = ref(""); // disabled is true if ANY input is empty string const disabled = computed(() => !input1.value || !input2.value || !input3.value); const clicked = () => console.log('clicked'); return { input1, input2, input3, disabled, clicked }; } }).mount('#app'); <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script> <div id="app"> Input 1: <input v-model="input1" type="text"/><br/> Input 2: <input v-model="input2" type="text"/><br/> Input 3: <input v-model="input3" type="text"/><br/> <button :disabled="disabled" @click="clicked">Click me</button> </div>tal vez debería usar v-model , computed o @input para escuchar el evento y cambiar el estado de desactivación del botón.