Field dependencies not working with Vue js


I've run into an issue with field dependencies not working, it seems to be caused via the use of a client side templating language (Vue) where it unmounts the pages DOM and then reinserts it after the epiforms javascript files have already made their references. Meaning when our Vue code remounts the form the client-side dependency selection logic stops working as those references are lost. Request blocking our own javascript and thus vue allows the form dependencies to work as expected.

I've tried appending EpiserverForms.js to the DOM myself using a timeout after the Vue component loads, however it seems to be conflicting with the original EpiserverForms.js that was loaded as part of the helper function Html.RequiredClientResources(header/footer). 

My current way of thinking to solve this is to somehow remove the EpiserverForms.js from the required client resources stopping it from evaluating immediately and then load it ourselves once our components are ready. The problem is there doesn't seem to be any way to remove or change client resources only add.

Has anyone run into this kind of issue before? Is there a solution I'm missing?

Could be a similar issue this person is running into

Oct 07, 2020 1:02

Managed to solve this... definitely not a standard solution but here we go.

Essentially by having a htmlhelper extension that gets the client resources and directly removes the EpiServerForm script src as below. This replaces the  Html.RequiredClientResources call.

		public static MvcHtmlString CustomRequiredClientResources(this HtmlHelper htmlHelper, string renderingArea)
			var requiredResources =
						ModuleHelper.GetWebResourceUrl(typeof(FormContainerBlockController), ConstantsForms.StaticResource.JS.EPiServerFormsMinifyPath),

			return new MvcHtmlString(requiredResources);

And then in a custom form container block you can get the script yourself and pass it through on a timer.

        var epiformsScriptPath = ModuleHelper.GetWebResourceUrl(typeof(FormContainerBlockController), ConstantsForms.StaticResource.JS.EPiServerFormsMinifyPath);
		<script type="text/javascript">

			function reloadepiFormJs(url) {
				var theScript = document.createElement('script');
				theScript.src = url;

				reloadepiFormJs('<%: epiformsScriptPath %>');
			}, 3000);

 If anyone has any feedback on a better way to solve this I'm all ears. :)

Oct 07, 2020 5:46

This same issue showed up for us. 

Nov 20, 2020 18:23

@Ben did you find a better way to resolve it?

Nov 20, 2020 22:36

We used Laurence's approach. 

Nov 21, 2020 1:11
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.