Field dependencies not working with Vue js

Vote:
 

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

https://world.episerver.com/forum/developer-forum/episerver-forms/thread-container/2020/10/field-dependency-does-not-work/

#229039
Oct 07, 2020 1:02
Vote:
 

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 =
				htmlHelper
					.RequiredClientResources(renderingArea)
					.ToString()
					.Replace(
						ModuleHelper.GetWebResourceUrl(typeof(FormContainerBlockController), ConstantsForms.StaticResource.JS.EPiServerFormsMinifyPath),
						string.Empty);

			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;
				document.head.appendChild(theScript);
			}

			window.setTimeout(function()
			{
				reloadepiFormJs('<%: epiformsScriptPath %>');
			}, 3000);
		</script>

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

#229041
Oct 07, 2020 5:46
Vote:
 

This same issue showed up for us. 

#231180
Nov 20, 2020 18:23
Vote:
 

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

#231182
Nov 20, 2020 22:36
Vote:
 

We used Laurence's approach. 

#231202
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.