Vue数据回显表单无法编辑的解决方案
作者:鲨鱼唖
这篇文章主要介绍了Vue数据回显表单无法编辑的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
Vue数据回显表单无法编辑
在项目中,有时会碰到在进行数据回显的时候,表单无法编辑。
handleCurrency(item, statusList) { (this.statusList = statusList), (this.sizeForm.name = item.name), (this.sizeForm.type = item.type.disValue == "null" ? "" : item.type.dicValue), (this.sizeForm.number = item.number), (this.sizeForm.remark = item.remark) }
后来在回显的方法里加入了:
this.sizeForm = JSON.parse(JSON.stringify(item))
然后就可以正常使用了。
Vue组件数据回显后无法清空
这种情况一般出现在 父组件 传值给 子组件,我们通过props接收子组件的值,在子组件内进行回显,回显完成后进行清空,发现清空不了。
在这种时候我们要记住在子组件是不能更改父组件的值的。
有两种方法可以清空这个值
1:比较暴力的方法,我们将从父组件获取到的值重新深复制一份,在子组件里使用新的数据,这样就可以清空值了。
created() { this.selectObj = JSON.parse(JSON.stringify(this.formInline)) },
2:在子组件更改时通过一个方法告知父组件,让父组件进行更改,这样传到子组件的值就会相应更改。这涉及到父子组件通信。
父子间通信:(父传子)
父组件:
<operate :isOperat="flag" :formInline="dataadd"s" ></operate>
子组件:
props: { isOperat: String, formInline: Object, }
(子传父)
子组件:
<input @click="sendMsg" type="button" value="给父组件传递值">
方法:
sendMsg(){ //func: 是父组件指定的传数据绑定的函数,this.msg:子组件给父组件传递的数据 this.$emit('func',this.msg) }
父组件:
<child @func="getMsgFormSon"></child>
方法:
getMsgFormSon(data){ this.msgFormSon = data console.log(this.msgFormSon) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。