vue 3 upgrade

Author: charliepage88

ui/field/AdminField.vue

@@ -17,33 +17,37 @@
 </template>
 
 <script>
-import { get } from 'lodash'
+import { get, isEmpty } from 'lodash'
 import Multiselect from '@/Adaptcms/Base/ui/components/Form/Multiselect'
 
 export default {
   props: [
-    'value',
+    'modelValue',
     'field',
     'errors',
     'formMeta',
     'model',
     'action'
   ],
 
+  emits: [
+    'update:modelValue'
+  ],
+
   components: {
     Multiselect
   },
 
   watch: {
-    value (newVal, oldVal) {
-      if (newVal !== oldVal) {
+    modelValue (newVal, oldVal) {
+      if (!isEmpty(newVal) && newVal !== oldVal) {
         this.selected = newVal
       }
     },
 
     selected (newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.$emit('input', newVal)
+        this.$emit('update:modelValue', newVal)
       }
     }
   },
@@ -68,7 +72,7 @@ export default {
 
   mounted () {
     if (!this.selected) {
-      this.selected = JSON.parse(this.value)
+      this.selected = this.modelValue
     }
   }
 }

ui/field/AdminOptions.vue

@@ -26,40 +26,42 @@ import { get } from 'lodash'
 
 export default {
   props: [
-    'value',
+    'modelValue',
     'field',
     'package',
     'errors',
     'fields'
   ],
 
+  emits: [
+    'update:modelValue'
+  ],
+
   watch: {
-    value (newVal, oldVal) {
+    modelValue (newVal, oldVal) {
       if ((newVal !== oldVal) && get(newVal, 'options', null)) {
         this.options = newVal.options
       }
     },
 
     options (newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.$emit('input', { options: newVal })
+        this.$emit('update:modelValue', { options: newVal })
       }
     }
   },
 
   computed: {
     hasError () {
       let key = 'meta.options'
-      let errors = get(this.$page, 'props.errors')
 
-      return (typeof errors[key] !== 'undefined')
+      return (typeof this.errors[key] !== 'undefined')
     },
 
     errorsList () {
       let key = 'meta.options'
-      let errors = get(this.$page, 'props.errors')
 
-      return (typeof errors[key] !== 'undefined' ? errors[key] : [])
+      return (typeof this.errors[key] !== 'undefined' ? this.errors[key].messages : [])
     }
   },
 
@@ -70,8 +72,8 @@ export default {
   },
 
   mounted () {
-    if (get(this.value, 'options', null)) {
-      this.options = this.value.options
+    if (get(this.modelValue, 'options', null)) {
+      this.options = this.modelValue.options
     }
   }
 }