[incubator-apisix-dashboard] branch master-vue updated: fix: array property editor (#279)

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch master-vue
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git


The following commit(s) were added to refs/heads/master-vue by this push:
     new 6ea093f  fix: array property editor (#279)
6ea093f is described below

commit 6ea093fc06b1186df8cb6237e81844f502c13cb7
Author: ko han <ha...@outlook.com>
AuthorDate: Wed Jun 24 19:33:19 2020 +0800

    fix: array property editor (#279)
    
    * fix: array property editor
    
    * feat: remove array items
---
 src/components/PluginDialog/index.vue | 49 +++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/PluginDialog/index.vue b/src/components/PluginDialog/index.vue
index d31d4b9..c47d3f3 100644
--- a/src/components/PluginDialog/index.vue
+++ b/src/components/PluginDialog/index.vue
@@ -142,13 +142,23 @@
             v-if="schema.properties[key].type === 'array'"
             class="array-input-container"
           >
-            <el-input
-              v-for="(arrayIndex) in arrayPropertiesLength[key]"
+            <div
+              v-for="(item, arrayIndex) in data[key]"
+              :key="arrayIndex"
+              class="object-input-item"
+            >
+              <el-input
               :key="arrayIndex"
               v-model="data[key][arrayIndex]"
               :placeholder="`${key} [${arrayIndex}]`"
               @input="isDataChanged = true"
-            />
+              />
+              <el-button
+              @click="deleteArrayItem(key, arrayIndex)"
+              >
+              {{ $t('button.delete') }}
+              </el-button>
+            </div>
 
             <el-button
               @click="addArrayItem(key)"
@@ -234,7 +244,6 @@ export default class extends Vue {
   private data: any = {}
   private isDataChanged: boolean = false
   private showDialog: boolean = false
-  private arrayPropertiesLength = {}
   private objectPropertiesArray = {}
 
   @Watch('show')
@@ -312,7 +321,6 @@ export default class extends Vue {
       switch (schema.properties[key].type) {
         case 'array':
           schemaKeys[key] = []
-          this.arrayPropertiesLength[key] = [...new Array(this.pluginData[key] ? this.pluginData[key].length : schema.properties[key].minItems).keys()]
           break
         case 'object':
           schemaKeys[key] = {}
@@ -387,19 +395,28 @@ export default class extends Vue {
     })
   }
 
-  /**
-   * Add item to array property
-   * @param key
-   */
-  private addArrayItem(key: any) {
-    if (this.arrayPropertiesLength[key].length < this.schema.properties[key].maxItems) {
-      this.arrayPropertiesLength[key].push(this.arrayPropertiesLength[key].length)
-      this.$forceUpdate()
-    } else {
-      this.$message.warning(`${this.$t('message.cannotAddMoreItems')}`)
+    /**
+     * Add item to array property
+     * @param key
+     */
+    private addArrayItem(key: any) {
+      if (this.data[key].length < this.schema.properties[key].maxItems) {
+        this.data[key].push("")
+        this.$forceUpdate()
+      } else {
+        this.$message.warning(`${this.$t('message.cannotAddMoreItems')}`)
+      }
     }
+  /**
+     * Delete item to array property
+     * @param key
+     * @param index
+     */
+  private deleteArrayItem(key: any, index: number) {
+    this.data[key].splice(index, 1)
+    this.isDataChanged = true
+    this.$forceUpdate()
   }
-
   /**
    * Add item to object property
    * @param key