为了账号安全,请及时绑定邮箱和手机立即绑定

修改右侧属性没有点击保存按钮数据是如何保存的呢?

修改右侧属性没有点击保存按钮数据是如何保存的呢?

青春有我 2019-05-24 18:38:19
新写了一个动态添加表单的demo,点击左侧按钮,根据点击的类型不同,生成不同的表单,右侧相应的出现该表单的属性设置项,demo做好之后发现我不点击保存按钮修改之后的数值就会自动保存到tplList相应的数组中,觉得很神奇,我怀疑是对象覆盖引起的,也就是下面这句代码:this.tplList.push(obj1);this.singleData=obj1.attr;tplList和singleData通过obj1.attr联系起来,我使用v-model双向绑定了右侧的姓名选项,每次修改都能会更新singleData里面的name属性,是不是这样导致了tplList中attr下的name也一起保存了呢?如果是的话以后如何避免这种操作呢?demo地址bug重现操作:(1)点击左侧input按钮(2)修改右侧姓名张三为张三2(3)点击左侧date按钮(其他的也行,radio慢一点)(4)再点击中间第一项,此时右侧姓名变成了张三2我的初衷是点击保存之后再点击第一项才会出现张三2补充下我的界面逻辑:界面分为左中右三部分:左边是按钮:根据点击的按钮类型向tplList中push相应的数据中间是表单集合:根据tplList的项循环输出相应类型的表单右侧是相应表单的属性:与tplList中每项中的attr绑定,点击中间的表单类型右侧出现相应的属性设置项tplList存储表单类型,每项中包含该表单类型的设置项(存储在attr中)singleData是临时数组,用来存放表单属性的1、点击左侧按钮2、往tplList中push数据3、清空singleData4、将刚才数据中的attr数据赋值给singleData5、右侧属性与singleData双向数据绑定,修改之后点击保存按钮将singleData中的数值覆盖对应的表单数据中的attr感谢@Whalefallsea的回答,解决后的代码地址为(代码做了优化):https://jsfiddle.net/zhoou/s7...
查看完整描述

2 回答

  • 2 回答
  • 0 关注
  • 433 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信