✨ CSV input

Author: AnandChowdhary

components/form/CommaList.vue

@@ -67,27 +67,35 @@ export default class CommaList extends Vue {
   @Prop() autocomplete;
   labelId = "";
   list = [""];
-
-  get commaList() {
-    return this.list.filter(item => !!item).join(",");
-  }
+  commaList = "";
 
   private created() {
     this.labelId = Math.random()
       .toString(36)
       .substring(7);
   }
 
+  private mounted() {
+    if (this.value) this.list = this.value.split(",");
+  }
+
   private add() {
     this.list.push("");
+    this.update();
   }
 
   private remove(index) {
     this.list.splice(index, 1);
+    this.update();
   }
 
   private input(index, val) {
     this.list[index] = val.target.value;
+    this.update();
+  }
+
+  private update() {
+    this.commaList = this.list.filter(item => !!item).join(",");
     this.$emit("input", this.commaList);
   }
 }

pages/manage/_team/api-keys/_key.vue

@@ -24,14 +24,8 @@
           label="IP restrictions"
           :value="apiKey.ipRestrictions"
           placeholder="Enter an IP address or CIDR, e.g., 192.168.1.1/42"
-          @input="
-            val => {
-              apiKey.ipRestrictions = val;
-              $forceUpdate();
-            }
-          "
+          @input="val => (apiKey.ipRestrictions = val)"
         />
-        {{ apiKey.ipRestrictions }}
         <CommaList
           label="Referrer restrictions"
           :value="apiKey.referrerRestrictions"