commit de23ea23d88451a2fa2774ec72053772603c23ae
author Surya V <suryav@ami.com> Thu Jul 11 15:19:46 2024 +0530
committer Ed Tanous <ed@tanous.net> Thu Oct 03 11:34:06 2024 -0700
tree 8b9a8e7df2a8eebffd4306d8ba805867d5f65bce
parent 883a0d597962dfd30d6c48319b8b33e2d0f98606

Vuelidate, I18n, and filter are upgraded to vue3

While navigating to the pages i18n, vuelidate, and filters errors
occurred. i18n, and vuelidate code changes in each page adapted to
vue3. Filter global function for date and time format implemented
in the main.js file and those files which as called the filter
functions.

Change-Id: If1a2ee22d47750faef1c35ef2c263299067d9a20
Signed-off-by: Surya Venkatesan <suryav@ami.com>

src/views/Settings/SnmpAlerts/ModalAddDestination.vue

diff --git a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
index f52acd7..91ef34f 100644
--- a/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
+++ b/src/views/Settings/SnmpAlerts/ModalAddDestination.vue
@@ -15,17 +15,17 @@
               <b-form-input
                 id="ip-Address"
                 v-model="form.ipAddress"
-                :state="getValidationState($v.form.ipAddress)"
+                :state="getValidationState(v$.form.ipAddress)"
                 data-test-id="snmpAlerts-input-ipAddress"
                 type="text"
-                @blur="$v.form.ipAddress.$touch()"
+                @blur="v$.form.ipAddress.$touch()"
               />
 
               <b-form-invalid-feedback role="alert">
-                <template v-if="!$v.form.ipAddress.required">
+                <template v-if="!v$.form.ipAddress.required">
                   {{ $t('global.form.fieldRequired') }}
                 </template>
-                <template v-if="!$v.form.ipAddress.ipAddress">
+                <template v-if="!v$.form.ipAddress.ipAddress">
                   {{ $t('global.form.invalidFormat') }}
                 </template>
               </b-form-invalid-feedback>
@@ -43,13 +43,13 @@
                 id="port"
                 v-model="form.port"
                 type="text"
-                :state="getValidationState($v.form.port)"
+                :state="getValidationState(v$.form.port)"
                 data-test-id="snmpAlerts-input-port"
-                @blur="$v.form.port.$touch()"
+                @blur="v$.form.port.$touch()"
               />
               <b-form-invalid-feedback role="alert">
                 <template
-                  v-if="!$v.form.port.minLength || !$v.form.port.maxLength"
+                  v-if="!v$.form.port.minLength || !v$.form.port.maxLength"
                 >
                   {{
                     $t('global.form.valueMustBeBetween', {
@@ -85,6 +85,7 @@
 import { required, ipAddress, minValue, maxValue } from '@vuelidate/validators';
 import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
 import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
 
 export default {
   mixins: [VuelidateMixin],
@@ -95,6 +96,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       form: {
         ipaddress: null,
         port: null,
@@ -117,8 +119,8 @@
   },
   methods: {
     handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+      this.v$.$touch();
+      if (this.v$.$invalid) return;
       this.$emit('ok', {
         ipAddress: this.form.ipAddress,
         port: this.form.port,
@@ -133,7 +135,7 @@
     resetForm() {
       this.form.ipAddress = '';
       this.form.port = '';
-      this.$v.$reset();
+      this.v$.$reset();
       this.$emit('hidden');
     },
     onOk(bvModalEvt) {