ayanova/src/components/role-control.vue

@@ -5,7 +5,8 @@
     item-value="id"
     multiple
     chips
-    :value="selectedRoles"
+    deletable-chips
+    :value="selectedValue"
     @input="handleInput"
     :readonly="readonly"
     :disabled="disabled"
@@ -27,16 +28,9 @@ export default {
   data() {
     return {
       internalValue: null,
-      selectedRoles: [],
       availableRoles: []
     };
   },
-  watch: {
-    value(val) {
-      this.internalValue = val;
-      this.setSelectedItems();
-    }
-  },
   props: {
     label: String,
     rules: Array,
@@ -50,6 +44,20 @@ export default {
     },
     testId: String
   },
+  computed: {
+    selectedValue() {
+      let ret = [];
+      if (this.value != null && this.value != 0) {
+        for (let i = 0; i < this.availableRoles.length; i++) {
+          let role = this.availableRoles[i];
+          if (!!(this.value & role.id)) {
+            ret.push(role.id);
+          }
+        }
+      }
+      return ret;
+    }
+  },
   methods: {
     allErrors() {
       let ret = "";
@@ -61,19 +69,6 @@ export default {
       }
       return ret;
     },
-    setSelectedItems() {
-      //turn internalValue numeric bitfield role value into array of selected roles
-      let ret = [];
-      if (this.internalValue != null && this.internalValue != 0) {
-        for (let i = 0; i < this.availableRoles.length; i++) {
-          let role = this.availableRoles[i];
-          if (!!(this.internalValue & role.id)) {
-            ret.push(role.id);
-          }
-        }
-      }
-      this.selectedRoles = [...ret];
-    },
     handleInput(value) {
       let newValue = 0;
       if (value != null && value != [] && value.length > 0) {