makes selector work

lootalot_front/src/components/Selector.vue

@@ -3,47 +3,55 @@
     <label class="button is-fullwidth">
         <input type="checkbox" class="checkbox" v-model="selected">
     </label>
-    <PercentInput v-model="modifier"></PercentInput>
+    <PercentInput v-model.number="mod_value"></PercentInput>
   </div>
 </template>
 
 <script>
 import PercentInput from './PercentInput.vue'
 
-/*
-Selector for a specific item, with an associated price modifier.
-
-Acts as checkbox on a v-model, except it populates an array with [value, modifier] instead of value alone
-
+/*  Selector for a specific item, with an associated price modifier.
+    Acts as checkbox on a v-model, except it populates an array with [value, modifier] instead of value alone
 */
 
 export default {
-    props: ["value"],
+    props: ["id", "value"],
     components: { PercentInput },
     data () {
         return {
             selected: false,
-            modifier: 0,
+            mod_value: 0,
         };
     },
-    methods: {
-        update () {
+    computed: {
+        modifier () {
+            return 1 + this.mod_value / 100;
+        }
+    },
+    watch: {
+        selected (newState) {
+            let idx = this._findData();
             var updated = this.value;
-            let idx = this.value.findIndex(([val, mod]) => this.value == val);
-            if (idx == -1) {
-                if this.selected {
-                    updated.push([this.value, this.modifier])
-                }
-            } else {
-                if this.selected {
-                    updated.splice(idx, 1, [this.value, this.modifier])
-                    // Replace this.value[idx] by [val, this.modifier]
-                } else {
-                    // Remove this.value[idx]
-                }
+            if (newState == true && idx == -1) {
+                updated.push([this.id, this.modifier]);
+            } else if (newState == false && idx != -1 ) {
+                updated.splice(idx, 1);
             }
             this.$emit('input', updated);
         },
+        mod_value (newState) {
+            let idx = this._findData();
+            var updated = this.value;
+            if (idx != -1) {
+                updated.splice(idx, 1, [this.id, this.modifier]);
+                this.$emit('input', updated);
+            }
+        }
+    },
+    methods: {
+        _findData () {
+            return this.value.findIndex(([val,mod]) => this.id == val);
+        }
     }
   }
 </script>