extracts Selector component

lootalot_front/src/components/Chest.vue

@@ -36,15 +36,7 @@
               @claim="(data) => $emit('claim', data)"
               @unclaim="(data) => $emit('unclaim', data)">
             </Request>
-            <div v-else-if="showSelectors" class="buttons has-addons">
-              <label :for="`select-${idx}`" class="button is-fullwidth">
-              <input type="checkbox" class="checkbox"
-                :id="`select-${idx}`"
-                :value="item.id"
-                v-model="selected_items">
-              </label>
-              <PercentInput v-model="modifiers[item.id]"></PercentInput>
-            </div>
+            <Selector :id="`select-${idx}`" v-else-if="showSelectors" v-model="selected_items"></Selector>
           </td>
         </tr>
       </template>
@@ -55,6 +47,7 @@
 <script>
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
+    import Selector from './Selector.vue'
     /*
         The chest displays a collection of items.
 
@@ -77,6 +70,7 @@
         components: {
             Request,
             PercentInput,
+            Selector,
         },
         data () {
             return {

lootalot_front/src/components/Selector.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="buttons has-addons">
+    <label class="button is-fullwidth">
+        <input type="checkbox" class="checkbox" v-model="selected">
+    </label>
+    <PercentInput v-model="modifier"></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
+
+*/
+
+export default {
+    props: ["value"],
+    components: { PercentInput },
+    data () {
+        return {
+            selected: false,
+            modifier: 0,
+        };
+    },
+    methods: {
+        update () {
+            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]
+                }
+            }
+            this.$emit('input', updated);
+        },
+    }
+  }
+</script>