In my Vue component childEle, there is a complex form structure stored in the data:
data:{
form:{
root1:Number,
root2:{
child1:[],
child2:{},
child3:String
},
root3:[],
root4:{
child4:string,
child5:[]
}
}
}
This JSON Object is tightly bound to the form in iView, making it challenging to flatten. I need to initialize values for this form when opening the component (a Modal). To achieve this, I pass values from the parent element using props:
props:{
outForm:{
type:Object,
default: function () {
return {}
}
}
……
}
I then watch for changes in the outForm prop:
watch:{
outForm(val){
this.form = val
}
}
However, an issue arises. I also have a value attribute that controls the visibility of the Modal. When I update the value attribute, the corresponding value in data remains unchanged, preventing the Modal from closing even after calling this.$forceUpdate().
How can this be resolved? Thank you for your assistance!