robrogers3
1 year ago

Help me fix a Vue.js Train Wreck (well entire js trainwreck)

Posted 1 year ago by robrogers3

I got myself into a jam by using multiple Vue instances throughout my app.

Here's the deal (it's a little complicated).

  • The app is a CMS, and before submitting data it needs some validation/sanity-checking.
  • BUT, each form is different; it's dynamically rendered based on the schema of the backend table (for starters).
  • So in order to handle this we load a validation script based on the type of object being edited.
  • the scripts are a mix of: jquery, vanilla js, and Vue. (New js is now module based using es6)
  • an example: if an Event (like a concert, say) is being submitted then:
    • if the event is a Weekend event then start and end times must be 48hrs apart.
    • if the event is a Evening dinner event then the duration cannot be more than say 4hrs.
    • or, before registering for an Event it's availability must be checked. (ajax)
  • OH, and yeah, some validaton is not a hard failure some are just warnings. Like a special weekend event could be longer than normal ones. Here we just want to display a warning. And the User can decide to basically submit as is, or fix the potential problem.

Now I'm trying to unify all validation that requires ajax to go through one Vue instance. Where it handles: All ajax requests for validation, displays Errors and Warnings, as well as calling validation that doesn't require a server call.

So what's the problem? Some of the validation is done from Vue.js and is triggered on the current validation handler. Which means, that the Object specific Vue based validator instance and the new Vue ajax validation handler instance have to be mounted on the same DOM element. Which means, they conflict and clobber each other. Well one wins, usually the the Object specific one. But even so it's data is gone (v-model specific data). And of course the Vue ajax validation instance is gone.

So what are my options? So far I've come up with:

  • Using a mixin. It's probably the best. But some validation handlers have no associated Vue instance. They are crusty old jquery mostly. Which means there's nothing to mixin to.
  • Using a plugin but it has the same problems and it's probably not as good as the mixin.
  • Making the validator with vanilla js. But I lose so many of the benefits I get from Vue.
  • I can't see a Component working.

So, in short, what do I do? I'm in a pickle.

Please sign in or create an account to participate in this conversation.