VCA动态表单数据绑定
背景
最近接到一个前端需求，使用VCA开发的，需要根据接口来的数据，进行动态表单渲染，当然也需要动态绑定表单数据
遇到问题
起初使用reactive动态对象来接收处理，导致的结果就是失去了响应式，能看到对象里生成了对应的key，但页面里输入框不能输入，单选多选也无法选中，不符合预期效果
分析原因
经过几轮尝试和文档查阅，大概可以得出以下几个关键点
reactive解构会导致失去响应式
form表单model绑定需要是一个对象
toRefs可以将对象生成响应式内容
通过以上几个特点分析，得出最终方案
解决方案
// setup声明 const formData: any = reactive({ formInfo: {}, }) return { ...toRefs(formData), } // 模版绑定 ref="form" :model="formInfo" 复制代码通过该方式实现了最终的效果，那个reactive里面必须得套一层，不然导出内容是一个个动态属性，而不是对象，绑定到模版还是会出问题，套一层后导出的就是一个动态对象了
作者：妙林
链接：https://juejin.cn/post/7031011735892918302