I want to disable the form submit button until all input fields are filled in and there are no errors.
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; } }); } })
The button is disabled by default, but it will not "enable" itself once the conditions already mentioned are met.
So far I'm using a secondary lifecycle hooknextTick()which obviously doesn't help me in this case.
The "disabled" status will be updated in the console, but not on the DOM.
How can I solve this problem?
cheers
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Maybe you should use
v-model,compulatedor@inputto listen to events and change the button disabled state.The simplest solution is to set the disabled state of the button using a
calculatedvalue - based on the input value - if any are empty, the button is disabledThis is a basic example
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');sssccc
Input 1:
Input 2:
Input 3:
. . . . test