在JSON输入框中手动加入新的表单项，表单项无法正常输入

[719034075]

作者您好：

我clone了本项目中的/examples/simple-demo在本地运行起来之后。

往中间的JSON输入框中，手动新增了新的表单项。

//old
[
    {
        "tag": "el-input",
        "item": {
            "label": "标题"
        },
        "detail": {
            "name": "title",
            "defaultValue": "默认标题"
        }
    },
    {
        "tag": "el-input",
        "item": {
            "label": "描述"
        },
        "detail": {
            "type": "textarea",
            "name": "desc",
            "placeholder": "请填写一个精彩的描述",
            "rows": 3
        }
    },
    {
        "tag": "el-date-picker",
        "item": {
            "label": "日期"
        },
        "detail": {
            "name": "date",
            "placeholder": "请选择日期",
            "valueFormat": "yyyyMMdd"
        }
    },
    {
        "tag": "el-radio",
        "item": {
            "label": "地区"
        },
        "detail": {
            "name": "area",
            "items": [
                {
                    "text": "北京",
                    "label": "1"
                },
                {
                    "text": "上海",
                    "label": "2"
                },
                {
                    "text": "广州",
                    "label": "3"
                },
                {
                    "text": "深圳",
                    "label": "4"
                }
            ]
        }
    },
    {
        "tag": "el-checkbox",
        "item": {
            "label": "主题"
        },
        "detail": {
            "name": "subject",
            "items": [
                {
                    "text": "历史",
                    "label": "1"
                },
                {
                    "text": "战争",
                    "label": "2"
                },
                {
                    "text": "科幻",
                    "label": "3"
                },
                {
                    "text": "爱情",
                    "label": "4"
                },
                {
                    "text": "文艺",
                    "label": "5"
                },
                {
                    "text": "生活",
                    "label": "6"
                }
            ]
        }
    },
    {
        "tag": "el-select",
        "item": {
            "label": "标签"
        },
        "detail": {
            "name": "tag",
            "multiple": true,
            "items": [
                {
                    "label": "温暖",
                    "value": "1"
                },
                {
                    "label": "感动",
                    "value": "2"
                },
                {
                    "label": "刺激",
                    "value": "3"
                },
                {
                    "label": "紧张",
                    "value": "4"
                },
                {
                    "label": "有爱",
                    "value": "5"
                },
                {
                    "label": "搞笑",
                    "value": "6"
                }
            ]
        }
    }
]

//new
[
    {
        "tag": "el-input",
        "item": {
            "label": "标题"
        },
        "detail": {
            "name": "title",
            "defaultValue": "默认标题"
        }
    },
    {
        "tag": "el-input",
        "item": {
            "label": "描述"
        },
        "detail": {
            "type": "textarea",
            "name": "desc",
            "placeholder": "请填写一个精彩的描述",
            "rows": 3
        }
    },
    {
        "tag": "el-date-picker",
        "item": {
            "label": "日期"
        },
        "detail": {
            "name": "date",
            "placeholder": "请选择日期",
            "valueFormat": "yyyyMMdd"
        }
    },
    {
        "tag": "el-radio",
        "item": {
            "label": "地区"
        },
        "detail": {
            "name": "area",
            "items": [
                {
                    "text": "北京",
                    "label": "1"
                },
                {
                    "text": "上海",
                    "label": "2"
                },
                {
                    "text": "广州",
                    "label": "3"
                },
                {
                    "text": "深圳",
                    "label": "4"
                }
            ]
        }
    },
    {
        "tag": "el-checkbox",
        "item": {
            "label": "主题"
        },
        "detail": {
            "name": "subject",
            "items": [
                {
                    "text": "历史",
                    "label": "1"
                },
                {
                    "text": "战争",
                    "label": "2"
                },
                {
                    "text": "科幻",
                    "label": "3"
                },
                {
                    "text": "爱情",
                    "label": "4"
                },
                {
                    "text": "文艺",
                    "label": "5"
                },
                {
                    "text": "生活",
                    "label": "6"
                }
            ]
        }
    },
    {
        "tag": "el-select",
        "item": {
            "label": "标签"
        },
        "detail": {
            "name": "tag",
            "multiple": true,
            "items": [
                {
                    "label": "温暖",
                    "value": "1"
                },
                {
                    "label": "感动",
                    "value": "2"
                },
                {
                    "label": "刺激",
                    "value": "3"
                },
                {
                    "label": "紧张",
                    "value": "4"
                },
                {
                    "label": "有爱",
                    "value": "5"
                },
                {
                    "label": "搞笑",
                    "value": "6"
                }
            ]
        }
    },
   {
        "tag": "el-input",
        "item": {
            "label": "姓名"
        },
        "detail": {
            "name": "name"
        }
    }
]

结果发现新增的input无法正常输入，疑似双向绑定异常。

但是在您的在线预览中却不存在这个问题https://element-form-builder.now.sh/

期待得到您的恢复，谢谢...

[719034075]

组件在创建的时候初始化了formValue...但是之后config更新之后，formValue并没有被监听更新。

[719034075]

现在的临时解决方案是在组件调用的时候，用v-if手动销毁创建。

[felixpy]

我会尝试复现一下你的问题。
感谢反馈！

[felixpy]

我在 Mac 系统 Chrome 浏览器下未能复现这个问题。可以提供一下你的本地环境信息吗？“新增的 input 无法正常输入” 的具体表现可以描述一下吗？此外，你可以尝试在 JS 源码中添加一下表单配置，看下是否存在同样的问题。谢谢！

[719034075]

OS:win10
浏览器:Chrome 72.0.3626.121（正式版本）（64位）
IDE:WebStorm
项目:/examples/simple-demo

  "dependencies": {
    "element-ui": "^2.4.11",
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "vue-template-compiler": "^2.5.17"
  },

npm run serve

上面删除过程中，其实我是按了好多的backspace但是无效。只在提交后，删除一个字。

此外，如果启动之前在js文件中的config.elements中预先添加，则可以正常使用

[felixpy]

最近 Vue 版本升级到 2.6.8 了，我找时间检查一下是不是这个原因。

[felixpy]

我在本地升级 Vue 至最新版本依然未能复现问题。如果你有时间，麻烦你在本地调试一下代码，帮忙定位一下问题，谢谢！