Caremonth - update ob visit status vue fix

resources/views/app/patient/care-month/care-month-update-mcp-onboarding-visit-info.blade.php

@@ -2,7 +2,7 @@
 	<a start show>Update</a>
 	<form url="/api/client/updateMcpOnboardingVisitInfo" class="mcp-theme-1">
 		<input type="hidden" name="uid" value="{{$patient->uid}}">
-		<div id="updateMcpOnboardingVisit" v-cloak>
+		<div id="updateMcpOnboardingVisit-{{$patient->uid}}" v-cloak>
 		<div class="mb-2">
 			<select name="hasMcpDoneOnboardingVisit" class="form-control form-control-sm" onchange="toggleDisabledAsNeeded(this, 'YES', 'if-visit-done')"  v-model="form.hasMcpDoneOnboardingVisit">
 				<option value="">-- Select Status --</option>
@@ -38,43 +38,48 @@
 
 
 <script>
-	var updateMcpOnboardingVisit = new Vue({
-		el:'#updateMcpOnboardingVisit',
-		data:{
-			form:{
-				hasMcpDoneOnboardingVisit: '{{ $patient->has_mcp_done_onboarding_visit }}'
-			},
-			showEnterInfoAlert: false
-		},
-		methods:{
-			initValidation: function(){
-				var self= this;
-				var fields = $('[name=mcpOnboardingVisitNoteUid], [name=reasonOnboardingVisitNoteOutsideSystem]');
-				if(self.form.hasMcpDoneOnboardingVisit == 'YES'){					
-					fields.prop('required', true);
-					fields.on('change keyup', function(){
-						fields.prop('required', false);
-						$(this).prop('required', true);
+	(function() {
+		function init() {
+			new Vue({
+				el:'#updateMcpOnboardingVisit-{{$patient->uid}}',
+				data:{
+					form:{
+						hasMcpDoneOnboardingVisit: '{{ $patient->has_mcp_done_onboarding_visit }}'
+					},
+					showEnterInfoAlert: false
+				},
+				methods:{
+					initValidation: function(){
+						var self= this;
+						var fields = $('[name=mcpOnboardingVisitNoteUid], [name=reasonOnboardingVisitNoteOutsideSystem]');
+						if(self.form.hasMcpDoneOnboardingVisit == 'YES'){
+							fields.prop('required', true);
+							fields.on('change keyup', function(){
+								fields.prop('required', false);
+								$(this).prop('required', true);
+							});
+							self.showEnterInfoAlert = true;
+						}else{
+							fields.prop('required', false);
+							self.showEnterInfoAlert = false;
+						}
+					},
+					init: function(){
+						this.initValidation();
+					}
+				},
+				mounted: function(){
+					this.init();
+				},
+				updated: function(){
+					var self = this;
+
+					self.$nextTick(function(){
+						self.initValidation();
 					});
-					self.showEnterInfoAlert = true;
-				}else{
-					fields.prop('required', false);
-					self.showEnterInfoAlert = false;
 				}
-			},
-			init: function(){
-				this.initValidation();
-			}
-		},
-		mounted: function(){
-			this.init();
-		},
-		updated: function(){
-			var self = this;
-
-			self.$nextTick(function(){
-				self.initValidation();
 			});
 		}
-	});
+		addMCInitializer('updateMcpOnboardingVisit-{{$patient->uid}}', init, '#updateMcpOnboardingVisit-{{$patient->uid}}');
+	}).call(window);
 </script>