🐛 fix:修复自定义属性自动添加的问题

README.md

@@ -18,7 +18,7 @@ A json-schema editor of high efficient and easy-to-use, base on Vue
   <img width="100%" src="https://github.com/zyqwst/json-schema-editor-vue/raw/master/examples/assets/capture.png">
 </p>
 
-**支持自定义属性，满足特殊的需求*
+**支持自定义属性，满足特殊的需求**
 
 <p align="center">
   <img width="100%" src="https://github.com/zyqwst/json-schema-editor-vue/raw/master/examples/assets/custom.png">
@@ -30,14 +30,12 @@ A json-schema editor of high efficient and easy-to-use, base on Vue
 **[国内Demo](http://json-schema-editor.sviip.com)**
 ### Usage
 
-```bash
 ```bash
 # vue2
 npm install json-schema-editor-vue
 # vue3 
 npm install json-schema-editor-vue3
 ```
-```
 
 ```vue
 import JsonSchemaEditor from 'json-schema-editor-vue'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-schema-editor-vue",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "author": "zhangyq",
   "description": "A json-schema editor of high efficient and easy-to-use, base on Vue",
   "keywords": [

packages/json-schema-editor/main.vue

@@ -89,7 +89,7 @@
             <a-col :span="8" v-for="item in customProps" :key="item.key">
               <a-form-item :label="item.key">
                 <a-input v-model="item.value" style="width:calc(100% - 30px)"/>
-                <a-button icon="close" type="link" @click="customProps.splice(customProps.indexOf(item),1)" style="width:30px"></a-button>  
+                <a-button icon="close" type="link" @click="removeCustomNode(item.key)" style="width:30px"></a-button>  
               </a-form-item>
             </a-col>
             <a-col :span="8" v-show="addProp.key != undefined">
@@ -197,6 +197,9 @@ export default {
     advancedAttr(){
       return TYPE[this.pickValue.type].attr
     },
+    ownProps () {
+      return [ 'type', 'title', 'properties', 'items','required', ...Object.keys(this.advancedAttr)]
+    },
     advancedNotEmptyValue(){
       const jsonNode = Object.assign({},this.advancedValue);
       for(let key in jsonNode){
@@ -206,10 +209,12 @@ export default {
     },
     completeNodeValue(){
       const t = {}
+      const basicValue = { ...this.pickValue }
       for(const item of this.customProps){
         t[item.key] = item.value
       }
-      return Object.assign({},this.pickValue,this.advancedNotEmptyValue, t)
+      this._pickDiffKey().forEach(key => delete basicValue[key])
+      return Object.assign({}, basicValue, t,this.advancedNotEmptyValue)
     },
     enumText () {
       const t = this.advancedValue['enum']
@@ -232,12 +237,6 @@ export default {
     }
   },
   methods: {
-    parseCustomProps () {
-      const ownProps = [ 'type', 'title', 'properties', 'items','required', ...Object.keys(this.advancedAttr)]
-      Object.keys(this.pickValue).forEach(key => {
-        ownProps.indexOf(key) === -1 && this.confirmAddCustomNode({ key: key, value: this.pickValue[key] })
-      })
-    },
     onInputName(e){
       const oldKey = this.pickKey
       const newKey = e.target.value
@@ -327,13 +326,37 @@ export default {
       const props = node.properties
       this.$set(props,name,{type: type})
     },
+    parseCustomProps () {
+      const ownProps = this.ownProps
+      Object.keys(this.pickValue).forEach(key => {
+        if (ownProps.indexOf(key) === -1) {
+          this.confirmAddCustomNode({ key: key, value: this.pickValue[key] })
+          // this.$delete(this.pickValue,key)
+        }
+      })
+    },
     addCustomNode(){
       this.$set(this.addProp,'key',this._joinName())
       this.$set(this.addProp,'value','')
       this.customing = true
     },
+    removeCustomNode(key) {
+      this.customProps.forEach((item,index) => {
+        if (item.key === key) {
+          this.customProps.splice(index,1)
+          return
+        }
+      })
+    },
     confirmAddCustomNode(prop) {
       const p = prop || this.addProp
+      let existKey = false
+      this.customProps.forEach(item => {
+        if (item.key === prop.key) {
+          existKey = true
+        }
+      })
+      if (existKey) return
       this.customProps.push(p)
       this.addProp = {}
       this.customing = false
@@ -354,7 +377,9 @@ export default {
       this.modalVisible = true
       this.advancedValue = { ...this.advanced.value }
       for(const k in this.advancedValue) {
-        if(this.pickValue[k]) this.advancedValue[k] = this.pickValue[k]
+        if(this.pickValue[k]) {
+          this.advancedValue[k] = this.pickValue[k]
+        }
       }
       this.parseCustomProps()
     },
@@ -368,9 +393,15 @@ export default {
           this.$set(this.pickValue,key,this.advancedValue[key])
         }
       }
+      const diffKey = this._pickDiffKey()
+      diffKey.forEach(key => this.$delete(this.pickValue,key))
       for(const item of this.customProps){
         this.$set(this.pickValue,item.key,item.value)
       }
+    },
+    _pickDiffKey () {
+      const keys = Object.keys(this.pickValue)
+      return keys.filter(item => this.ownProps.indexOf(item) === -1)
     }
   }
 }