[Vuejs]-Vue – add delay before enabling a disabled button

0👍

I’m on mobile so apologies about formatting and lack of code. For me I would probably set up a variable to track the disabled state, say var isFormComplete = false; I would use the vue disabled prop to control the button/form state. :disabled=“!isFormComplete”.

Then I would set up a vue watch or even computed method in the JS which basically will check if each form control is empty or whatever arbitrary value checking you want to do, since it’s dynamic behind the scenes with variables it should be pretty simple to check through each form control and when all conditions are satisfied, set the isFormComplete or whatever you want to call it to true and your control will be enabled.

For extra fun and bonus points, you could set up some generic validation code to be reusable and abstract it out as a vue mixin and have yourself a nifty custom form validation you can reuse. I know this isn’t a traditional answer but since I’m mobile I felt this was more indepth than a comment even though there is a lack of code. You can add a timer as well in the validation method to when all conditions are satisfied delay by however long you want and then set the disabled variable to false.

Leave a comment