makes modifier kind-of work, needs refactoring

lootalot_front/src/components/PercentInput.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="field has-addons">
     <div v-show="is_opened" class="control has-icons-left">
-      <input class="input" type="number" size="3" min=-50 max=50 step=5>
+      <input class="input" :value="value" @input="input" type="number" size="3" min="-50" max=50 step=5>
       <span class="icon is-left">
         <i class="fas fa-percent"></i>
       </span>
     </div>
     <div class="control">
-      <button class="button" @click="is_opened = !is_opened">
+      <button class="button" @click="switchOpenedState">
         <small v-if="!is_opened">Mod.</small>
         <span v-else class="icon"><i class="fas fa-times-circle"></i></span>
       </button>
@@ -17,14 +17,25 @@
 
 <script>
     export default {
+        props: ["value"],
         data () {
             return {
                 is_opened: false,
             };
+        },
+        methods: {
+            input (event) { this.$emit("input", event.target.value); },
+            switchOpenedState () {
+                this.is_opened = !this.is_opened;
+                // Reset the modifier in closed state
+                if (!this.is_opened) {
+                    this.$emit("input", 0);
+                }
+            }
         }
     }
 </script>
 
 <style scoped>
-.input { width: 6em; }
+  .input { width: 6em; }
 </style>