在JSON输入框中手动加入新的表单项，表单项无法正常输入
719034075 opened this issue · comments
作者您好：
我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/
期待得到您的恢复，谢谢...
组件在创建的时候初始化了formValue...但是之后config更新之后，formValue并没有被监听更新。
现在的临时解决方案是在组件调用的时候，用v-if手动销毁创建。
我会尝试复现一下你的问题。
感谢反馈！
我在 Mac 系统 Chrome 浏览器下未能复现这个问题。可以提供一下你的本地环境信息吗？“新增的 input 无法正常输入” 的具体表现可以描述一下吗？此外，你可以尝试在 JS 源码中添加一下表单配置，看下是否存在同样的问题。谢谢！
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中预先添加，则可以正常使用
最近 Vue 版本升级到 2.6.8 了，我找时间检查一下是不是这个原因。
我在本地升级 Vue 至最新版本依然未能复现问题。如果你有时间，麻烦你在本地调试一下代码，帮忙定位一下问题，谢谢！