refactor InputCombo

src/components/EditItem.vue

@@ -10,13 +10,14 @@
             label="description"
             :model="item"
             field="description"
-            :validation-fn="str => str.length > 0"
+            :validation-fn="str => str && str.length > 0"
         />
         <InputCombo
             label="box"
             :model="item"
-            field="box"
-            :options="getBoxes"
+            nameKey="box"
+            uniqueKey="cid"
+            :options="boxes"
         />
     </div>
 </template>
@@ -34,7 +35,7 @@ export default {
   computed: {
     ...mapGetters(['getBoxes']),
     boxes({ getBoxes }) {
-      return getBoxes.map(box => box.name);
+      return getBoxes.map(obj => ({cid: obj.cid, box: obj.name}));
     }
   },
   methods: {

src/components/inputs/InputCombo.vue

@@ -11,22 +11,25 @@
                 <div class="dropdown-menu">
                     <a
                         v-for="option in options"
-                        :key="option"
+                        :key="option[uniqueKey]"
                         class="dropdown-item"
                         @click="setInternalValue(option)"
                     >
-                        {{ option }}
+                      {{ option[nameKey] }}
                     </a>
                 </div>
-                <button
-                    class="btn"
-                    :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
-                    @click="addOption()"
-                >
-                    <font-awesome-icon icon="plus"/>
-                </button>
             </div>
-            <input type="text" class="form-control" :id="label" v-model="internalValue">
+            <input type="text" class="form-control" :id="label" v-model="internalName">
+            <div class="input-group-append">
+              <button
+                class="btn"
+                :class="{ 'btn-info disabled': isValid, 'btn-success': !isValid }"
+                v-if="!isValid"
+                @click="addOption()"
+              >
+                <font-awesome-icon icon="plus"/>
+              </button>
+            </div>
             <Addon type="Combo Box" :is-valid="isValid"/>
         </div>
     </div>
@@ -38,27 +41,34 @@ import Addon from './Addon';
 export default {
   name: 'InputCombo',
   components: {Addon},
-  props: [ 'label', 'model', 'field', 'options', 'onOptionAdd' ],
-  data: ({ model, field }) => ({
-    internalValue: model[field],
+  props: [ 'label', 'model', 'nameKey', 'uniqueKey', 'options', 'onOptionAdd' ],
+  data: ({ options, model, nameKey, uniqueKey }) => ({
+    internalName: model[nameKey],
+    selectedOption: options.filter(e => e[uniqueKey] === model[uniqueKey])[0],
     addingOption: false
   }),
   computed: {
-    isValid: ({ internalValue, options }) => options.includes(internalValue)
+    isValid: ({options, nameKey, internalName}) => options.some(e => e[nameKey] === internalName)
   },
   watch: {
-    internalValue(newValue, oldValue) {
+    internalName(newValue, oldValue) {
+      if (this.isValid) {
+        if(newValue!=this.selectedOption[this.nameKey]){
+          this.selectedOption = this.options.filter(e => e[this.nameKey] === this.internalName)[0];
+        }
+        this.model[this.nameKey] = this.selectedOption[this.nameKey];
+        this.model[this.uniqueKey] = this.selectedOption[this.uniqueKey];
+      }
       console.log(oldValue, newValue, this.isValid);
-      if (this.isValid)
-        this.model[this.field] = newValue;
     }
   },
   methods: {
-    setInternalValue(value) {
-      this.internalValue = value;
+    setInternalValue(option) {
+      this.selectedOption = option;
+      this.internalName = option[this.nameKey];
     },
     addOption() {
-      this.onOptionAdd(this.internalValue);
+      this.onOptionAdd({[this.nameKey]: this.internalName});
     }
   }
 };